使用 ViewChildren 访问子组件的指令

Question

为了访问组件中的指令，我尝试了Angular 2: Get reference to a directive used in a component，但这不适用于组件子组件中的指令。

子组件是使用 ViewContainerRef 动态创建的。

 @ViewChildren(ViewRefDirective) allMyDirectives; 

//This doesn't work for directives in the child components

我有多个不同的子组件，这就是为什么我不能在 ViewChild 中指定单个子组件的名称来访问其指令。

指令

@Directive({
  selector: '[view-ref-host]',
})
export class ViewRefDirective {
  constructor(public viewContainerRef: ViewContainerRef) {
   }
}

父组件

<div>
  <div view-ref-host>Parent block
    <child-panel-one></child-panel-one>
    <child-panel-two></child-panel-two>
    <child-panel-three></child-panel-three>
  </div>
</div>

子面板一组件

<div>
  <div view-ref-host>Child panel one
    <!-- html here -->
  </div>
</div>

子面板二组件

<div>
  <div view-ref-host>Child panel two
    <!-- html here -->
  </div>
</div>

子面板三组件

<div>
  <div view-ref-host>Child panel three
    <!-- html here -->
  </div>
</div>

如何使用 ViewChild 装饰器访问父子组件中的所有指令？

Answer 1

您可以在父组件中定义方法，例如：

allMyDirectives: ViewRefDirective[] = [];

registerRef(ref: ViewRefDirective) {
  this.allMyDirectives.push(ref);
}

并在指令的构造函数中注册指令：

@Directive({
  selector: '[view-ref-host]',
})
export class ViewRefDirective {
  constructor(
    public viewContainerRef: ViewContainerRef,
    @Optional() parent: AppComponent
  ) {
    if (parent) {
      parent.registerRef(this);
    }
  }
} 

Ng-run Example

Answer 2

正确的实现方式是： @ViewChild("MyCustomDirective") allMyCustomDirectives;

Answer 3

您需要导出指令。然后只有您可以从父母或孩子那里使用它。然后从父级将其绑定到一个变量并使用视图子级访问该变量

@Directive({
  selector: '[view-ref-host]',
  exportAs:'viewRefDirective'  
})
export class ViewRefDirective {
  constructor(public viewContainerRef: ViewContainerRef) {
   }
}

<div>
  <div #cdire=viewRefDirective view-ref-host>Child panel one
    <!-- html here -->
  </div>
</div>

 @ViewChildren('cdire') allMyDirectives; 

更新

您可以使用QueryList 执行此操作。在每个 Child 中，添加组件

@ViewChildren('cdire') children: QueryList<ViewRefDirective>;

在父级中，级别添加

@ViewChildren('cdire') allMyDirectives; 
@ViewChild(childPanelOneComponent) c1: childPanelOneComponent;
@ViewChild(childPanelTwoComponent) c2: childPanelTwoComponent;
@ViewChild(childPanelThreeComponent) c3: childPanelThreeComponent;

ngAfterViewInit() {
    this.c1.children.forEach((child) => child.showChildName());
    this.c2.children.forEach((child) => child.showChildName());
    this.c3.children.forEach((child) => child.showChildName());
  }