背景
某种情况下，某些UI需要重复使用，或者这个UI比较复杂，想要单独编辑。这时候可以创建一个component，并给这个component命名（my-component)。这样只要在html中添加<my-component></my-component>就可以显示这个UI了。
创建步骤：
使用命令行创建一个component
- 创建：使用ionic命令创建一个component：
$ionic g component MyComponent。
- 检查：直接在其他html页面中使用标签
<my-component></my-component>
ionic serve 运行如果能正确在html 页面中看到 component的内容说明创建成功说明没问题。
使用input当component的输入
- 在MyComponent.ts中导入
import {Input} from '@angular/core';
- 定义一个MyComponent的成员变量：
@Input('myText') myText: string;
- 在my-component标签中传入input的value，
<my-component [myText]="some thing"></my-component>
- 检查：ionic serve 运行如果能正确在html 页面中看到 component的内容说明创建成功说明没问题。
在component中监听input的变化
ngOnChanges(changes: SimpleChanges) {
// only run when property "myText" changed
if (changes['myText']) {
console.log('changes', changes)
}
}
使用output当component的输出
- 在标签中添加输出事件
<my-component [myText]="some thing" （somethingHappened)="doSomething()"></my-component>
然后就可以在ts文件中编写方法doSomething了
doSomething(){
console.log('we did it.')
}
- 在MyComponent中添加output变量
@Output() somethingHappened: any = new EventEmitter();
- 在MyComponent中更具需求触发EventEmitter
this.somethingHappened.emit("it is time")
- 将it is time 这个数据传到是呀my-component 标签的页面
- 在标签中触发的事件添加event 参数
<my-component [myText]="some thing" （somethingHappened)="doSomething($event)"></my-component>
- 在ts中的doSomething方法接收数据
doSomething(ev){
console.log(ev)
}
注意事项：
- component 的模块必须导入到使用这个component的页面所在的模块中
imports: [
ComponentsModule
]
- 如果用想在component中使用各种ionic的标签需要将IonicModule 导入到 component模块中
imports: [IonicModule]
