一、初始化控件 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; //实现绑定
}
简单的记录，虽然简单，也是一步一坑，希望能帮助到需要的同学们。
