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
)的 属性 的引用?我一直在摆弄 ElementRef
和 ViewContainer
但我没有看到直接引用组件实例的方法。我可以通过事件绑定到主机来获取它,但我只需要在用户单击 'Apply' 按钮时访问这些值,每次更新值时都发出一个事件似乎很浪费。组件中还有其他方法我最终需要从指令中调用。
如果需要,我可以提供更多信息。谢谢!
我找到了一个相对简单的解决方案。您可以只使用指令中的 Injector
手动注入从注入器树中找到的最接近的标记,它应该是父代:
export class DrawerItemDirective {
constructor(@Inject(FilterDrawerComponent) public drawer) {}
ngAfterViewInit() {
const prop = this.drawer.propertyIWantToAccess;
this.doStuff(prop);
}
}
所以,我正在为网格 (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
但我没有看到直接引用组件实例的方法。我可以通过事件绑定到主机来获取它,但我只需要在用户单击 'Apply' 按钮时访问这些值,每次更新值时都发出一个事件似乎很浪费。组件中还有其他方法我最终需要从指令中调用。
如果需要,我可以提供更多信息。谢谢!
我找到了一个相对简单的解决方案。您可以只使用指令中的 Injector
手动注入从注入器树中找到的最接近的标记,它应该是父代:
export class DrawerItemDirective {
constructor(@Inject(FilterDrawerComponent) public drawer) {}
ngAfterViewInit() {
const prop = this.drawer.propertyIWantToAccess;
this.doStuff(prop);
}
}