AngularJS 2：如何让“属性”指令与其主机组件通信？

Question

我正在尝试在 Angular 2 中编写一个实用程序指令，它应该与其宿主组件协作：

<my-component my-directive></my-component>

特别是，my-directive 将监视某些输入，然后调用应由my-component 提供的某些函数。例如，我正在编写的指令将封装样板文件，以使组件充当拖放操作的放置区域：

export const ResourceDropArea = ng.Directive({
    selector: '[resource-drop-area]',
    inputs:   ['data: resourceDropArea'],
    host: {
        '(dragenter)': ' dragenter($event) ',
        '(dragleave)': ' dragleave($event) ',
        '(dragover)':  ' dragover ($event) ',
        '(drop)':      ' drop     ($event) '
    }
}).Class({
    constructor() {}
    // event handling code
});

但是组件本身仍然需要指定当数据被放到它上面时要做什么。这就是我遇到麻烦的地方。如何获取组件对象？还是有更好的办法？

哦，我非常感谢 ES6 解决方案（不仅仅是 Typescript）。

Answer 1

您可以使用依赖注入来获取宿主组件的实例。

export const ResourceDropArea = ng.Directive({ /* ... */ }).Class({

    constructor(myComponent) {
        this.myComponent = myComponent;
    },  

    drop($event) {
        this.myComponent.callSomeMethod();
    }
});

ResourceDropArea.parameters = [MyComponent];