ionic自定义控件

一、初始化控件 ionic g component 控件名字 创建相应的.module.ts，并引入控件，例如：

import { NgModule} from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { TempComponent } from './temp';

@NgModule({

declarations: [ TempComponent, ],

imports: [ IonicPageModule.forChild(TempComponent), ],

exports: [ TempComponent,

]})

export class TempComponentModule {}

二、项目中控件模块中引入自定义控件，并导出

import { TempComponentModule } from './temp/temp.module';

@NgModule({

declarations: [],

imports: [BrowserModule,TempComponentModule ],

exports: [TempComponentModule]})export class ComponentsModule {}

/**

注意引入BrowserModule来解决ngFor报错的问题（如果遇到）

*/

三、文件中使用,同样的需要在.module.ts中注入相应的控件module

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { TempPage } from './temp';

import { TempComponentModule } from '../../components/temp/temp.module'

@NgModule({

declarations: [ TempPage, ],

imports: [ IonicPageModule.forChild(TempPage), TempComponentModule ],

})

export class TempPageModule {}

四、入参及事件处理

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

@Component({

selector: 'temp-compontent',

templateUrl: 'temp-compontent.html'

})

export class TempComponent{

private _tempKey: string;

constructor() {

}

@Input() 

getTempKey(){

return this._tempKey;

}

// 入参，调用者传入数据 

@Input() set tempKey(value){

this._tempKey = value;

this.tempKeyChenge.emit(value);

}

// 暴露出事件给调用者，并把相应的数据传出去

@Output() tempKeyChenge: EventEmitter<any> = new EventEmitter();

}

相应的html代码

<div> {{_tempKey}}</div>

五、使用控件

<temp-compontent [tempKey]="temp" (tempKeyChenge)="tempKeyChangeAction($event)"></temp-compontent>

并在相应的ts文件里面实现

tempKeyChangeAction(value){

   console.log("控件里面传出来的修改过的tempKey值是："+value);

   this.temp = value; //实现绑定

}

简单的记录，虽然简单，也是一步一坑，希望能帮助到需要的同学们。