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

Question

У меня есть компоненты 'Parent' и 'Child'. Из Parent мы можем добавить или удалить child. поэтому дети динамичны. в родительском я отрисовал дочерний компонент в цикле, как показано ниже

Parent.component.html

<child *ngFor="let child of children" [data]="child"></child>

Теперь в дочернем компоненте я добавил функцию IsValid (), чтобы проверить допустимость дочернего элемента

Child.component.ts

IsValid()
{
  //check validity of component and return true if valid else false
}

в родительском компоненте У меня есть кнопка «Сохранить». Я должен включить эту кнопку, если все дочерние элементы действительны, иначе необходимо отключить эту кнопку.

Поэтому мне нужен способ вызова функции IsValid дочерних компонентов для каждого дочернего компонента из Parent, а затем определения результата действия и применения его к кнопке Сохранить, чтобы включить или отключить

Что я пробовал

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

но проблема здесь: если я добавил одного ребенка, сделайте его действительным, кнопка сохранения будет включена. Теперь я добавил еще один дочерний объект, который недопустим, поэтому кнопка сохранения будет отключена, но если я удалю недопустимый дочерний элемент, кнопка сохранения будет отключена, хотя у нас есть только один допустимый дочерний элемент ..., поскольку событие IsValid выдается только в том случае, если текущий дочерний элемент получает изменения.

2. Я могу использовать что-то вроде этого

<child #varName></child>

@ViewChild('varName') childElement;

и потом от родителя я могу позвонить

childElement.IsValid() 

но с тех пор, как я представил детей в цикле, как дать уникальное имя в цикле и как добавить ссылку на этот уникальный тег HTML в файле ts.

Я создал чехол здесь SlackBlitz

Любая помощь будет оценена. Спасибо

Answer 1

Возможно, вы захотите использовать @ ViewChildren

В родительском компоненте:

@ViewChildren(ChildComponent) children: QueryList<ChildComponent>;

areChildrenValid(): boolean {
   const invalid = this.children.some(c => !c.IsValid());
   return !invalid;
}

Обратите внимание, что children будет определено после AfterViewInit hook.

Answer 2

@angular/core обеспечивает ViewChildren и QueryList, вероятно, это должно вам помочь.

<child #varName></child>
import { ViewChildren, QueryList } from '@angular/core';
@ViewChildren("varName") customComponentChildren: QueryList<YourComponent>;

this.customComponentChildren.forEach((child) => { let retult = child.IsValid(); })

Answer 3

Вы можете использовать Компонентный селектор:

@ViewChildren(ChildComponent) childrenList: QueryList<ChildComponent>;

, запустить цикл через него и определить срок действия.