Как получить все дочерние компоненты компонента в угловых

Question

У меня есть угловой компонент, и мне нужно получить все дочерние компоненты этого компонента. Как это можно сделать?

Answer 1

Ранее опубликованное решение с ViewChildren выполнит свою задачу, если вы по отдельности импортируете и называете каждый компонент, который хотите запросить. Альтернативный вариант, если вы не хотите беспокоиться о том, к какому конкретному типу относится данный компонент, - предоставить одну и ту же переменную шаблона каждому компоненту, к которому вы в конечном итоге захотите получить доступ.

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

Тогда вы можете использовать ViewChildren и QueryList с типом any

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

Вы также можете использовать contentchildren, если компоненты включены

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

Отсюда есть несколько подходов, но я бы просто дал каждому из этих компонентов метод с одинаковым именем, который их отключает.

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

Они не обязательно должны иметь один и тот же метод с одним и тем же именем, это просто упрощает программную итерацию всех этих элементов.

Answer 2

Одним из возможных решений (может быть, есть и лучшее) является использование ViewChildren, и таким образом вы получите доступ ко всем дочерним компонентам с указанным именем:

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

  /* ... */
}

Вот пример: STACKBLITZ