Блог

У меня есть компоненты ‘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 дочерних компонентов для каждого дочернего компонента из родительского, а затем определить результат достоверности и применить его к кнопке сохранения, чтобы включить или отключить

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

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

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

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

 <child #varName></child>

@ViewChild('varName') childElement;
  

и затем из родительского я могу вызвать

 childElement.IsValid() 
  

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

Я создал здесь case SlackBlitz

Мы будем признательны за любую помощь. Спасибо

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

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

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

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

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

@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(); })
  

Вы могли бы использовать Component selector:

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

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