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进行此操作。在每个子级中，组件添加

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

使用ViewChildren的子组件的访问指令

3 个答案: