Angular 2:从属性指令获取对组件 属性 的引用

Angular 2: Get reference to component property from attribute directive

所以,我正在为网格 (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)的 属性 的引用?我一直在摆弄 ElementRefViewContainer 但我没有看到直接引用组件实例的方法。我可以通过事件绑定到主机来获取它,但我只需要在用户单击 'Apply' 按钮时访问这些值,每次更新值时都发出一个事件似乎很浪费。组件中还有其他方法我最终需要从指令中调用。

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

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

export class DrawerItemDirective {

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

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