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>()相当于回调事件