zoukankan      html  css  js  c++  java
  • Angular2 EventEmitter

    可能你对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页

  • 相关阅读:
    SAP PI 如何实现消息定义查询
    EWM与ERP交互程序
    ITS Mobile Template interpretation failed. Template does not exist
    SAP Material Flow System (MFS) 物料流系统简介
    SAP EWM Table list
    EWM RF 屏幕增强
    SAP EWM TCODE list
    SAP扩展仓库管理(SAPEWM)在线研讨会笔记
    ERP与EWM集成配置ERP端组织架构(二)
    EWM RF(Radio Frequency)简介
  • 原文地址:https://www.cnblogs.com/Ceri/p/7686372.html
Copyright © 2011-2022 走看看