javascript - Angular 从父组件获取所有子组件的状态

Question

我有组件“Parent”和“Child”。我们可以从 Parent 添加或删除子项。所以 child 是有活力的。在 Parent 中，我在循环中渲染了 Child 组件，如下所示

Parent.component.html

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

现在在子组件中我添加了一个名为 IsValid() 的函数来检查子组件是否有效

子组件.ts

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

在父组件中，我有一个名为“保存”的按钮，如果所有子组件都有效，我必须启用该按钮，否则需要禁用该按钮。

所以我需要一种方法来从父组件调用子组件的每个子组件的 IsValid 函数，然后确定有效性结果并将其应用于保存按钮以启用或禁用

我尝试过的

1.我已从 child 向 parent 发出有效或无效的结果，如果任何 child 的结果无效，我已禁用保存按钮。

但这里的问题是:如果我添加了一个 child ，使其有效，保存按钮将被启用。现在我添加了另一个无效的 child ，因此保存按钮将被禁用，但如果我删除无效的 child ，保存按钮将被禁用，尽管我们只有一个有效的 child ..因为 IsValid 事件仅在当前 child 发生变化时才会发出。

2.我可以用这样的东西

<child #varName></child>

@ViewChild('varName') childElement;

然后我可以从 parent 那里打电话

childElement.IsValid() 

但是因为我已经在循环中渲染了 child ，所以如何在循环中给出唯一的名称以及如何在 ts 文件中添加对该唯一 HTML 标记的引用。

我在这里创建了案例SlackBlitz

任何帮助将不胜感激。谢谢

Answer 1

您可能想使用 @ViewChildren

在你的父组件中:

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

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

请注意，children 将在 AfterViewInit 钩子(Hook)之后定义。