标签:ring puts angular you str 配置 管理 定义 string
可能你对EventEmitter还不太熟悉,不过别担心,它并不难。
EventEmitter只是一个帮你实现观察者模式①的对象。也就是说,它是一个管理一系列订阅者并向其发布事件的对象。就是这么简单。
来看一个使用EventEmitter的简单小例子:
let ee = new EventEmitter(); ee.subscribe((name: string) => console.log(`Hello ${name}`)); ee.emit("Nate"); // -> "Hello Nate"
当我们把一个EventEmitter赋值给一个输出的时候, Angular会自动帮我们订阅事件。我们不需要自己订阅。(当然,如果需要,你仍然可以实现自己的订阅逻辑。)
下面是一段具有outputs的组件示例代码:
@Component({ selector: ‘single-component‘, outputs: [‘putRingOnIt‘], template: ` <button (click)="liked()">Like it?</button> ` }) class SingleComponent { putRingOnIt: EventEmitter<string>; constructor() { this.putRingOnIt = new EventEmitter(); } liked(): void { this.putRingOnIt.emit("oh oh oh"); } }
可以看到我们做了完整的三步动作:(1) 指定outputs配置项;(2) 创建一个EventEmitter并把它赋值给我们指定的输出属性putRingOnIt;(3) 当liked方法被调用时,触发这个事件。
如果希望在一个父级组件中使用这个输出,可以这样做:
@Component({ selector: ‘club‘, template: ` <div> <single-component (putRingOnIt)="ringWasPlaced($event)" ></single-component> </div> ` }) class ClubComponent { ringWasPlaced(message: string) { console.log(`Put your hands up: ${message}`); } } // logged -> "Put your hands up: oh oh oh"
再来回顾一下:
摘自:《Angular权威教程》第78页
标签:ring puts angular you str 配置 管理 定义 string
原文地址:http://www.cnblogs.com/Ceri/p/7686372.html