Angular中的EventEmitter、@Output、@Input、OnChanges
⽂章⽬录
EventEmitter 类
EventEmitter⽤在带有 @Output 指令的组件中，以同步或异步⽅式发出⾃定义事件，并通过订阅实例来为这些事件注册处理器。// EventEmitter类继承⾃Rxjs的Subject。（EventEmitter 类派⽣⾃ Observable。）
class EventEmitter<T>extends Subject<T>{
/**
* 构造函数，⽤于创建此类的实例，该实例可以同步或异步发送事件。
* isAsync 默认值为false，表⽰同步传递事件。为 true 时，异步传递事件。
* 泛型T，表⽰要发射的值和被订阅的值类型
*/
constructor(isAsync?:boolean): EventEmitter<T>
// 发出包含给定值的事件。value为要发出的值，类型为T。
emit(value?:T):void
// 注册此实例发出的事件的处理器。
subscribe(next?:(value:T)=>void, error?:(error:any)=>void, complete?:()=>void): Subscription
}
使⽤ EventEmitter ⾃定义事件
Directives(指令) 通常使⽤ Angular 的 EventEmitter 引发⾃定义事件：
该指令创建⼀个 EventEmitter 并将其对外暴露为属性。
该指令调⽤ it(data) 发出事件，传⼊消息数据，该消息数据可以是任何东西。
⽗指令通过绑定到该属性来监听事件，并通过传⼊的 $event 对象接收数据。
⼦组件把数据发送到⽗组件 @Output、EventEmitter
@Output() 在⼦组件中标记了⼀个属性，作为数据从⼦组件传递到⽗组件的途径。
⼦组件使⽤ @Output() 属性来引发事件，以通知⽗组件这⼀变化。为了引发事件， @Output() 必须是 EventEmitter 类型，它是@angular/core 中⽤来发出⾃定义事件的类。
// ⼦组件
import{ Output, EventEmitter }from'@angular/core';
export class ItemOutputComponent {
/**
* @Output() -  ⼀个装饰器函数，它把该属性标记为数据从⼦组件进⼊⽗组件的⼀种途径
* newItemEvent - 这个 @Output() 的名字
* EventEmitter<string> - 这个 @Output() 的类型
* new EventEmitter<string>() - 使⽤ Angular 来创建⼀个新的事件发射器，它发出的数据是 string 类型的。
*/
@Output() newItemEvent =new EventEmitter<string>();
addNewItem(value:string){
}
}
// ⼦组件模板
<label for="item-input">Add an item:</label>
<input type="text" id="item-input" #newItem>
<button(click)="addNewItem(newItem.value)">Add to parent's list</button>
// ⽗组件
export class AppComponent {
items =['item1','item2','item3','item4'];
addItem(newItem:string){
this.items.push(newItem);
}
}
// ⽗组件模板中使⽤⼦组件
<app-item-output(newItemEvent)="addItem($event)"></app-item-output>
⽗组件修改⼦组件中的数据 @Input
⼦组件或指令中的 @Input() 装饰器表⽰该属性可以从其⽗组件中获取值。/**
* ⽗组件模板
* 使⽤⼦组件的 selector (<app-item-detail>) 作为⽗组件模板中的指令。
* 使⽤属性绑定把⼦组件的 item 属性绑定到⽗组件的 currentItem 属性上。
*/
<app-item-detail [item]="currentItem"></app-item-detail>
// ⽗组件
export class AppComponent {
currentItem ='Television';
}
// ⼦组件模板output的反义词
<p>
Today's item:{{item}}
</p>
// ⼦组件
import{ Component, Input }from'@angular/core';
export class ItemDetailComponent {
@Input() item ='';
}
监视 @Input() 的变更的两种⽅式
⽅式⼀：setter
// ⼦组件模板
<p>
Today's item:{{_item}}
</p>
// ⼦组件
import{ Component, Input }from'@angular/core';
export class ItemDetailComponent {
_item:string='';
@Input()set item(value:string){
this._item = value;
// 每当数据发送改变时要执⾏的操作
this.valueChangeHandler()
};
valueChangeHandler(){
console.log('数据被⽗组件更改了，我应该相应地做点别的操作！');
}
}
⽅式⼆：OnChanges⽣命钩⼦
// ⼦组件模板
<p>
Today's item:{{item}}
</p>
// ⼦组件
import{ Component, Input, OnChanges, SimpleChanges,}from'@angular/core';
export class ItemDetailComponent {
@Input() item ='';
ngOnChanges(changes: SimpleChanges){
console.log('item的最新值:', changes.item.currentValue,'item的旧值:', changes.item.previousValue;)
// 每当数据发送改变时要执⾏的操作
this.valueChangeHandler()
}
valueChangeHandler(){
console.log('数据被⽗组件更改了，我应该相应地做点别的操作！');
}
}
ngOnChanges钩⼦和SimpleChanges对象
在Angular⽣命周期钩⼦的执⾏顺序中，ngOnChanges()排在第⼀位。
⽣命钩⼦⽤途时机注意事项
ngOnChanges()ngOnChanges()是⼀个⽣命周期钩⼦，当组件或
指令的任何⼀个可绑定属性(输⼊属性)发⽣变化时
调⽤。 定义⼀个 ngOnChanges() ⽅法来处理这
些变更。
当 Angular 设置或重新设置数据绑定的输⼊属性
时响应。 该⽅法接受当前和上⼀属性值的
SimpleChanges 对象。
ngOnChanges() ⽅法获取了⼀个对象，它把每个
发⽣变化的属性名都映射到了⼀个SimpleChange
对象， 该对象中有属性的当前值和前⼀个值。这个
钩⼦会在这些发⽣了变化的属性上进⾏迭代，并记
录它们。
如果组件绑定过输⼊属性，那
么在 ngOnInit() 之前以及所绑
定的⼀个或多个输⼊属性的值
发⽣变化时都会调⽤。
如果⾄少发⽣了⼀次变更，则
该回调⽅法会在默认的变更检
测器检查完可绑定属性之后、
视图⼦节点和内容⼦节点检查
完之前调⽤。
1. OnChanges发⽣的⾮常频繁，所以你在这
⾥执⾏的任何操作都会显著影响性能。
2. 如果你的组件没有输⼊属性，或者你使⽤它
时没有提供任何输⼊属性，那么框架就不会调
⽤ ngOnChanges()。
3. 当输⼊属性的引⽤发⽣改变时，才会触发钩
⼦ngOnChanges()。⽐如说，如果输⼊属性是
⼀个对象hero: Hero，⽽⽗组件只修改了
hero.name的值，则不会触发⼦组件的
ngOnChanges()。
SimpleChanges：⽤ SimpleChange 对象表⽰的变更的哈希表。
export declare interface SimpleChanges {
[propName:string]: SimpleChange;
}
export declare class SimpleChange {
previousValue:any;
currentValue:any;
firstChange:boolean;
constructor(previousValue:any, currentValue:any, firstChange:boolean); // 检查新值是否是⾸次赋值的。
isFirstChange():boolean;
}
组件要如何实现本接⼝来定义⼀个输⼊属性的变更处理器？
@Component({selector:'my-cmp', template:`...`}) class MyComponent implements OnChanges {
// 输⼊属性
@Input() prop:number=0;
// 变更处理器
ngOnChanges(changes: SimpleChanges){
// changes.prop contains the old and the }
}
使⽤变更检测钩⼦

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。