ionic2 + cordova app - custom components

11.1 Basic introduction (welcome to join the Q group to learn and discuss together 657185219)

  Angular2 controller and Directive are combined into Component, which has been introduced earlier, so we write components like other ordinary pages.

11.2 Component call

 

<page-dropdown
     <!--[dataList] Input brackets (dropMenuClick) callback event parentheses -->
     [dataList]="dataList"  (dropMenuClick)="dropMenuClick($event)">
 </page-dropdown>

 Here I call the drop-down component name is page-dropdown The following is explained in detail    

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  // component input
  dataList: string [];
  constructor(public navCtrl: NavController) {
    this.dataList = ["1","2","3"];
  }
  // component callback event
  dropMenuClick (callBack:string) {
      console.log("dropMenu_callBack_value:"+callBack);
  }

}

 

 

11.3 Declaration of components

 

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>

 

 

   Small suggestion: In a group of cases, the shared components are placed in the share folder under the project, and all component declarations are placed in share.module.ts

   Note: 1.  @Input() dataList:string [];  As the name implies, it means input, and the content displayed by the component needs to be passed from the caller. 2. @Output() dropMenuClick = new EventEmitter<string>() is equivalent to a callback event