码迷,mamicode.com
首页 > 其他好文 > 详细

Angular2 EventEmitter

时间:2017-10-18 15:01:46      阅读:182      评论:0      收藏:0      [点我收藏+]

标签: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"

再来回顾一下:

  • putRingOnIt是在SingleComponent的outputs配置项中定义的;
  • ringWasPlaced是ClubComponent中的一个方法;
  • $event包含被触发事件参数(输出的内容),在这个例子中是一个字符串。

 

摘自:《Angular权威教程》第78页

Angular2 EventEmitter

标签:ring   puts   angular   you   str   配置   管理   定义   string   

原文地址:http://www.cnblogs.com/Ceri/p/7686372.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!