欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ionic2 + cordova 应用-自定义组件

程序员文章站 2022-05-31 08:22:29
...

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


ionic2 + cordova 应用-自定义组件
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangular自定义组件教程 
    

    

  • ionic2 + cordova 应用-自定义组件
            
    
    博客分类: ionic2 + cordva混合开发 ionic2cordovaangular自定义组件教程 
  • 大小: 101 KB