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