Input与Output都是属性装饰器。
通常用于父子组件通信使用。
@Input
用来定义组件内的输入属性。
.d.ts 文件中定义如下:
export interface InputDecorator {
(bindingPropertyName?: string): any;
new (bindingPropertyName?: string): any;
}
由定义知道, 绑定的属性名是个可写参数。
因此,我们可以这定义 Input。
(1)不带参数名
@Input() count: number =0
在父组件使用时,传入的参数值如下:
<app-counter [count]="parentCount"></app-counter>
此时,在父组件传入的参数名,默认就是 count。
(2)带参数名
@Input('inputValue') count: number = 0
在父组件使用时,传入的参数值如下:
<app-counter [inputValue]="parentCount"></app-counter>
此时,在父组件传入的参数名,就是我们定义的属性名 inputValue。
(3) setter & getter
相比 @Output,@Input多了这两个属性,可以用来约束属性的设置和获取。
语法格式如下:
@Input()
set count() {
//逻辑值处理
} get count():T{
// 逻辑处理后返回值
return ...;
}
(4) ngOnchanges
当数据绑定输入值属性的值发生变化时,会触发 ngOnChanges()
语法如下:
ngOnChanges(changedEles : SimpleChange) {
// changedEles['属性名']
}
SimpleChange 会有三个值:
previousValue: any;
currentValue: any;
firstChange: boolean;
@Output
用来定义组件内的输出属性。
export interface OutputDecorator {
(bindingPropertyName?: string): any;
new (bindingPropertyName?: string): any;
}
当子组件的数据发生变化,需要通知父组件时,常常使用 EventEmitter。 使用方法:
1、子指令创建一个 EventEmitter 实例,作为输出属性导出。
@Output() changeCount : EventEmitter<any> = new EventEmitter<any>(); // 然后在某个时刻将信息发给父组件,一般在某个函数中
// 发送的信息可以是任何类型的
this.changeCount.emit(any)
2、父组件通过事件名称,获取子组件发过来的数据。
// 子组件事件名称 ="父组件函数名称($event)"
// 其中,$event 就是 子组件传送过来的数据
<app-counter [count]="initialCount" (changeCount)="parentChangeCount($event)"></app-counter>
@Input 与 @ Output综合代码如下:
子组件代码
使用 ng g c counter 命令生成组件代码。
counter.component.html
<p>当前值: {{ count }}</p>
<button (click)="increment()"> + </button>
<button (click)="decrement()"> - </button>
import { Component, OnInit , Input, OnChanges, SimpleChanges , Output , EventEmitter} from '@angular/core'; @Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
styleUrls: ['./counter.component.scss']
})
export class CounterComponent implements OnInit, OnChanges {
@Output() changeCount: EventEmitter<any> = new EventEmitter<any>();
constructor() { } ngOnInit() {
} _count: number = 0; @Input()
set count (num: number) {
this._count = num;
} get count(): number {
return this._count;
} increment() {
this.count++;
} decrement() {
this.count--;
this.changeCount.emit({
count: this._count,
fromChildFun: 'decrement'
});
} ngOnChanges(changedEles: SimpleChanges) {
console.dir(changedEles['count']);
}
}
父组件
<app-counter [count]="parentInitialCount" (changeCount)="parentChangeCount($event)"></app-counter>
parentInitialCount: number = 0; parentChangeCount($event) {
console.dir($event);
}