Question

我正在尝试在我的角度应用程序中实现一些功能。我创建了一个父指令appParent以及另外两个指令appChildAbc和appChildXyz。

我想要做的是，每当我将appParent指令应用于元素时，我都希望检查其子元素（同一组件中的本地HTML元素）并将某些逻辑应用于这些子元素

经过大量的搜索和努力，我找到了一种方法来使用ViewContainerRef中的ParentDirective和@ViewChildren中的AppComponent，但是我不得不使用{{1 }}，这似乎不是正确的方法。

是否还有其他方法可以在父指令??中获取((this.viewContainerRef as any)._view.nodes)的引用？

样本堆叠突击here

可以随意添加代码并根据需要进行更新。预先感谢

父母指令

Child Elements

App.component.ts

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.html

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

Answer 1

您可以使用:after装饰器来查询子指令

ParentDirective

@ContentChildren

ContentChildren 用于从内容DOM获取元素或指令的QueryList。任何时候添加，删除或子元素移动后，查询列表将更新，并且可观察到的更改查询列表将发出一个新值。

demo ?

使用带有嵌套指令的viewChildren获取孩子

父母指令

App.component.ts

App.component.html

1 个答案: