如何以角度检索组件的所有子组件

Question

我有一个Angular组件，我需要获取该组件的所有子组件。怎么办呢？

Answer 1

可能的解决方案之一（可能有更好的解决方案）是使用ViewChildren，这样您就可以访问具有指定名称的所有子组件：

export class YourComponent {
  @ViewChildren(ChildComponentFoo) private _childrenFoo: QueryList<ChildComponentFoo>;
  @ViewChildren(ChildComponentBar) private _childrenBar: QueryList<ChildComponentBar>;

  /* ... */
}

以下是一个示例：STACKBLITZ

Answer 2

如果单独导入并命名要查询的每个组件，ViewChildren之前发布的解决方案就可以解决问题。如果您不想关注组件的具体类型，另一种方法是为您最终要访问的每个组件提供相同的模板变量。

<component1 #disabler></component1>
<component2 #disabler></component2>
<component3 #disabler></component3>

然后您可以使用ViewChildren和QueryList，类型为任何

@ViewChildren('disabler') mycomponents: QueryList<any>;

如果组件被转换，您也可以使用contentchildren

@ContentChildren('disabler') mycomponents: QueryList<any>;

从这里有几种方法，但我只是给这些组件中的每一个提供一个相同名称的方法来禁用它们。

this.mycomponents.forEach((element)=>{
     element.disable();
  })

他们不一定都必须使用相同名称的相同方法，只是简单地以编程方式迭代它们。