Question

我的自定义表组件有一个select-all指令。我希望我的指令的用户能够以两种方式实例化它：

1：

<my-custom-table>
    <input type="checkbox" my-select-all-directive/>
</my-custom-table>

2：

<input type="checkbox" [table]="myTableRef" my-select-all-directive/>
<my-custom-table #myTableRef></my-custom-table>

我能够通过在我的指令构造函数中使用Host，Inject和forwardRef来获得第一种方法：

constructor(@Host() @Inject(forwardRef(() => MyCustomTableComponent)) table?: MyCustomTableComponent) {
    this.table = table; //later I can call this.table.selectAll();
}

但是当我以第二种方式实例化它时，我得到一个异常，抱怨没有MyCustomTableComponent的提供者，大概是因为MyCustomTableComponent不是第二种实例化方式中的父级，所以Host和forwardRef什么都不返回。 ..

如何使该参数可选？所以我的指令使用它的父或祖父母MyCustomTableComponent（如果它存在），或者使用传递给它的任何表作为输入......

Answer 1

您可以使用@Optional()装饰器选择依赖项：

constructor(@Optional() @Host() @Inject(forwardRef(() => MyCustomTableComponent)) table?: MyCustomTableComponent) {
    this.table = table; //later I can call this.table.selectAll();
}

Angular2如何将父组件注入指令只有它在那里？

1 个答案: