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];

AngularJS 2：如何拥有＆＃39;属性＆＃39;指令与其主机组件通信？

1 个答案: