EventEmitter
用在带有 @Output
指令的组件中,以同步或异步方式发出自定义事件,并通过订阅实例来为这些事件注册处理器。
Use in components with the @Output
directive to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.
class EventEmitter<T> extends Subject {
constructor(isAsync?: boolean): EventEmitter<T>
emit(value?: T): void
subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription
}
参见
构造函数
创建此类的实例,该实例可以同步或异步发送事件。 Creates an instance of this class that can deliver events synchronously or asynchronously. | |||
参数
返回值 |
方法
发出包含给定值的事件。 Emits an event containing a given value. |
使用说明
通过添加 emit()
方法来扩展 Angular 的 RxJS Subject
。
Extends RxJS Subject
for Angular by adding the emit()
method.
在以下示例中,组件定义了两个创建事件发射器的输出属性。单击标题后,发射器将发出打开或关闭事件以切换当前可见性状态。
In the following example, a component defines two output properties that create event emitters. When the title is clicked, the emitter emits an open or close event to toggle the current visibility state.
@Component({
selector: 'zippy',
template: `
<div class="zippy">
<div (click)="toggle()">Toggle</div>
<div [hidden]="!visible">
<ng-content></ng-content>
</div>
</div>`})
export class Zippy {
visible: boolean = true;
@Output() open: EventEmitter<any> = new EventEmitter();
@Output() close: EventEmitter<any> = new EventEmitter();
toggle() {
this.visible = !this.visible;
if (this.visible) {
this.open.emit(null);
} else {
this.close.emit(null);
}
}
}
Access the event object with the $event
argument passed to the output event handler:
<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>