Angular 2 : Get reference to component property from attribute directive

Question

因此，我正在为网格 (Ag-Grid) 编写一堆过滤器组件。我将在多个位置显示这些过滤器，因此我正在为它们编写一个包装器以便从不同位置访问它们的值。目前我正在实现一个将显示过滤器的过滤器抽屉，并使用属性指令 app-drawer-item 来获取对它们的引用:

<app-filter-drawer #drawer [gridRef]="agGrid">

  <app-text-filter app-drawer-item forColumn="AlertSid"></app-text-filter>

  <app-date-filter app-drawer-item forColumn="Name"></app-text-filter>

</app-filter-drawer>

如您所见，将有许多过滤器，因此将它们硬编码到 app-filter-drawer 中并不明智。我正在使用 app-filter-drawer 中的 @ContentChildren 来获取对每个指令的引用。

是否可以从 app-drawer-item 指令中获取对过滤器组件(如 app-text-filter)属性的引用？我一直在摆弄 ElementRef 和 ViewContainer 但我没有看到直接引用组件实例的方法。我可以通过事件绑定(bind)到主机来获取它，但我只需要在用户单击“应用”按钮时访问这些值，每次更新值时发出一个事件似乎很浪费。组件中还有其他方法，我最终需要从指令中调用这些方法。

如果需要，我可以提供更多信息。谢谢!

Answer 1

我找到了一个相对简单的解决方案。您可以只使用指令中的 Injector 手动注入(inject)从注入(inject)器树中找到的最接近的标记，它应该是父代:

export class DrawerItemDirective {

    constructor(@Inject(FilterDrawerComponent) public drawer) {}

    ngAfterViewInit() {
        const prop = this.drawer.propertyIWantToAccess;
        this.doStuff(prop);
    }
}