使用 ViewChildren 访问子组件的指令

Question

为了访问组件中的指令，我尝试了但这不适用于组件的子组件中的指令。

子组件是使用 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

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

Answer 2

您需要导出指令。然后只有您可以从 parent 或 child 使用它。然后从 parent 将它绑定到一个变量并使用视图 child

访问该变量

@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>;

在parent层添加

@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());
  }

Answer 3

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

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

使用 ViewChildren 访问子组件的指令

Access directives of child components using ViewChildren

decorator

angular-directive

angular