`

ionic2 + cordova 应用-自定义组件

阅读更多

11.1 基本介绍 (欢迎加入Q群一起学习讨论657185219)

  angular2 controller 和 Directive 合并成Component ,前文已有介绍,所以我们编写组件和其他普通页面一样。

11.2 组件调用

 

<page-dropdown 
     <!--[dataList] 入参 中括号 (dropMenuClick)回调事件小括号-->
     [dataList]="dataList"  (dropMenuClick)="dropMenuClick($event)">
 </page-dropdown>
 这里我调用了下拉的组件名字叫page-dropdown下面详细解释
   
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  // 组件入参
  dataList: string [];
  constructor(public navCtrl: NavController) {
    this.dataList = ["1","2","3"];
  }
  // 组件回调事件
  dropMenuClick (callBack:string) {
      console.log("dropMenu_callBack_value:"+callBack);
  }

}
 

 

11.3 组件的申明

 

import {Component,Input,Output,EventEmitter} from '@angular/core';

@Component({
  selector: 'page-dropdown',
  templateUrl: 'dropdown.html'
})

export class DropdownPage {
  @Input() dataList:string [];
  @Output() dropMenuClick = new EventEmitter<string>();
  constructor() {
  }

  menuClick (clickMenu:string) {
    this.dropMenuClick.emit("menu"+"<"+clickMenu+"> is selectd");
  }
}


    dropdown.html

 

  

<ul class="dropdown-menu" >
    <li *ngFor="let data of dataList"  (click)="menuClick(data)">{{data}}</li>
</ul>
 

 

   小建议:一帮情况下共用组件统一放在项目下share文件夹下,所有组件申明都放在share.module.ts里面

   注意点 :1.  @Input() dataList:string []; 顾名思义是输入的意思,组件显示的内容需要从调用处传过来。2. @Output() dropMenuClick = new EventEmitter<string>()相当于回调事件 



    

    

  • 大小: 101 KB
分享到:
评论

相关推荐

    angular/ionic的相机插件cordova-plugin-camera-5.0.1

    Angular 是一个强大的前端 JavaScript 框架,而 Ionic 是基于 Angular 的移动应用开发框架,它提供了一套丰富的组件和工具,使开发者可以快速构建美观的、原生感的移动应用。在 Ionic 应用中,有时我们需要集成原生...

    ionic+Angular+Cordova初学者文档

    "20 ionic动态组件 $ionicModal $ionicActionSheet $ionicPopup $ionicPopover $ionicLoading.pdf"介绍了ionic中的动态组件,如模态对话框、动作表、弹出框和加载提示,这些都是构建用户交互界面时不可或缺的部分。...

    ionic3-使用cordova创建自定义插件

    在本文中,我们将深入探讨如何使用Ionic 3和Cordova创建自定义插件,以便实现打印功能。这个过程包括理解这两个框架的工作原理,以及如何将它们结合在一起开发原生移动应用功能。 首先,让我们了解 Ionic 和 ...

    ionic3自定义cordova插件

    2. **导入和使用插件**:在`Ionic 3`的组件或服务中,通过`import { Cordova } from '@ionic-native/core'`引入`Cordova`的装饰器,然后使用`@Cordova()`装饰器暴露插件的方法。 3. **处理异步操作**:由于`Cordova...

    初学者 nodejs+ionic+cordova 详细安装教程

    2. **构建iOS IPA**:使用命令 `cordova build ios` 构建 iOS 应用。 **安装APP到模拟器** 1. **Android模拟器**:使用命令 `cordova run android --emulator` 将应用安装到 Android 模拟器。 2. **iOS模拟器**:...

    ionic-app-base-master.zip

    【标题】"ionic-app-base-master.zip" 是一个包含 Ionic 应用基础结构的压缩包,主要针对使用 Ionic 框架开发移动应用的开发者。Ionic 是一个流行的开源框架,它基于 Angular 并利用 Cordova 或 Capacitor 实现原生...

    使用Ionic2制作移动应用

    ##### 第一课:生成一个Ionic2应用 - **启动Ionic CLI**:首先,安装Node.js,然后通过npm全局安装Ionic CLI (`npm install -g ionic`). - **创建新项目**:使用命令 `ionic start myAppName tabs --type=angular` ...

    EXPERT-Building-Mobile-Apps-with-Ionic-2

    - **创建页面、组件、指令、管道和服务**:这些是Angular的核心概念,也是Ionic 2应用程序的基础构建块。例如,页面代表了一个特定的视图,而组件则封装了视图及其相关行为。 #### 模板与样式 - **模板语法**:...

    cordova-plugin-seuic-scanner.rar

    在这个背景下,`cordova-plugin-seuic-scanner.rar`是一个专门为PDA红外扫码定制的插件,适用于基于Ionic框架的应用。这个插件的特别之处在于它采用了广播方式来处理扫码事件,使得在扫码后可以自动失去焦点并触发...

    Building Mobile Apps with Ionic 2 final2.0 (附项目源码)

    10. **发布与部署**:掌握将Ionic 2应用打包成iOS和Android应用的流程,以及如何通过App Store和Google Play发布应用。 通过《构建移动应用 with Ionic 2 final2.0》的学习,开发者不仅可以掌握Ionic 2框架的精髓,...

    01 Ionic Angular Cordova介绍以及Ionic环境搭建-avi.rar

    【标题】"01 Ionic Angular Cordova介绍以及Ionic环境搭建-avi.rar"涉及的主要知识点是移动应用开发框架 Ionic、Angular 和 Cordova 的基础知识及其环境配置。这篇文章将详细讲解这三个技术的核心概念、相互关系以及...

    ionic应用-tab应用+返回键监听

    标题中的“ionic应用-tab应用+返回键监听”指的是使用Ionic框架构建的一款应用,该应用采用了Tab导航模式,并且集成了返回键监听功能。Ionic是一款基于AngularJS和Apache Cordova的移动应用开发框架,它允许开发者...

    用Ionic2编写移动应用程序

    根据提供的文件信息,将生成关于使用Ionic2编写移动应用程序的知识点: 首先,Ionic2是一个用于构建移动应用的开源前端框架。通过使用Ionic2,开发者可以利用Web技术(如HTML、CSS和JavaScript)创建跨平台的移动...

    ionic+phonegap 案例源码

    Ionic框架的核心特点包括使用AngularJS(现在是Angular)进行数据绑定和状态管理,使用Sass进行样式定义,以及提供了一套丰富的UI组件,如导航、滑动、表单等,用于构建具有原生外观和感觉的应用。此外,Ionic还...

    cordova-plugins-tntgdlocation.zip

    总的来说,`cordova-plugins-tntgdlocation.zip` 文件提供了一个自定义的 Cordova 插件,解决了在 Ionic 应用中使用高德地图定位服务的问题。这个插件展示了如何将原生功能与 Web 开发技术结合,为跨平台移动应用...

    ionic2自定义插件demo

    5. **集成到Ionic应用**:将自定义插件添加到你的 Ionic 2 项目中,使用`ionic plugin add`命令。接着,在你的组件或服务中,通过`window.plugins`对象调用插件方法。 结合给出的链接`...

    ionic-vue-getting-started:Ionic + Vue YouTube入门视频的源代码-vue source code

    1. **项目结构**:典型的Vue项目结构,包括`src`目录下的`main.js`入口文件、`App.vue`根组件、`components`目录下的自定义组件等。 2. ** Ionic组件**:在Vue组件中使用Ionic的UI元素,如`ion-button`, `ion-input...

    ionic-字母索引-城市选择

    它与Angular和 Capacitor 或 Cordova 配合使用,使开发者能够使用一套代码库跨平台开发iOS、Android和Web应用。 - ** Angular**:Angular是Google维护的一个前端框架,用于构建单页应用程序。它提供了数据绑定、...

    ionic2自定义cordova插件开发以及使用(Android)

    在本文中,我们将深入探讨如何在 Ionic 2 项目中创建和使用自定义的 Cordova 插件,特别是在 Android 平台上。Cordova 是一种流行的移动应用开发框架,它允许开发者使用 Web 技术(如 HTML、CSS 和 JavaScript)来...

    ionic支持库(包括命令行和插件)

    Ionic 提供了一个美观的UI组件库,用于构建跨平台的应用。这些组件包括按钮、卡片、网格、表单元素等,设计风格符合Material Design和Apple的Human Interface Guidelines。通过使用Ionic,开发者可以用一套代码同时...

Global site tag (gtag.js) - Google Analytics