使用带嵌套指令的 viewChildren 获取 children

Question

我正在尝试在我的 angular 应用程序中实现一些功能。我创建了一个 parent 指令 appParent 和另外两个指令 appChildAbc 和 appChildXyz.

我想做的是，每当我在元素上应用 appParent 指令时，我想检查它的 child 元素（同一元素中的原生 HTML 元素组件）并对这些 child 元素应用一些逻辑。

经过大量搜索和努力，我找到了一种使用 ParentDirective 中的 ViewContainerRef 和 AppComponent 中的 @ViewChildren 的方法，但我不得不使用 ((this.viewContainerRef as any)._view.nodes)，这看起来不像是正确的方法。

有没有其他方法可以在parent指令中获取Child Elements的引用??

stackblitz 示例 here

随时分叉代码并根据需要进行更新。提前致谢

Parent 指令

export class ParentDirective {
  constructor(private vcr: ViewContainerRef) {}

  ngAfterViewInit() {
    console.log((this.vcr as any)._view.nodes);
    let lists = (this.vcr as any)._view.nodes.filter(
      x => x.constructor.name === "QueryList"
    );
    lists.forEach(list => {
      list.toArray().forEach(x => {
        if (x.constructor.name === "ChildXyzDirective")
          x.elementRef.nativeElement.style.background = "red";
        else x.elementRef.nativeElement.style.background = "green";
        console.log(x);
      });
    });
  }
}

App.component.ts

export class AppComponent  {
  name = 'Angular';
  @ViewChildren(ChildXyzDirective) xyzChildren: QueryList<ChildXyzDirective>;
  @ViewChildren(ChildAbcDirective) abcChildren: QueryList<ChildAbcDirective>;
}

App.component.html

<div appParent>
  Parent div directive
  <div appChildAbc>
    Abc Child directive 1
  </div>
  <div appChildAbc>
    Abc Child directive 2
  <div appChildXyz>
    Xyz Child directive 1
  </div>
  <div appChildXyz>
    Xyz Child directive 2
  </div>
</div>

Answer 1

你可以使用@ContentChildren装饰器来查询子指令

父指令

@Directive({
  selector: "[appParent]"
})
export class ParentDirective {

 @ContentChildren(ChildXyzDirective,{descendants: true}) 
 xyzChildren : QueryList<ChildXyzDirective>;

 @ContentChildren(ChildAbcDirective,{descendants: true}) 
 abcChildren : QueryList<ChildAbcDirective>;

  ngAfterContentInit() {  

      this.abcChildren.forEach(e => {
        e.elementRef.nativeElement.style.background = "red";
      });

      this.xyzChildren.forEach(e => {
        console.log(e)
        e.elementRef.nativeElement.style.background = "green";
      });

  }
}

ContentChildren Use to get the QueryList of elements or directives from the content DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.

demo

使用带嵌套指令的 viewChildren 获取 children

Get children using viewChildren with nested directives

angular

angular-directive

viewchild

Parent 指令

App.component.ts

App.component.html