Question

我有“父级”和“子级”组件。从“父级”我们可以添加或删除子级。所以孩子们充满活力。在父级中，我已经像下面的

那样在循环中渲染了子级组件

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
}

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

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

我尝试过的事情

1。我已经从孩子向父母发出了有效或无效的结果，如果任何孩子的结果无效，则我禁用了保存按钮。

但是这里的问题是：：如果我添加了一个孩子，请使其生效，将启用“保存”按钮。现在，我添加了另一个无效的子项，因此将禁用保存按钮，但是，如果我们删除一个无效的子项，则将禁用子项保存按钮，尽管我们只有一个有效子项。因为仅当当前子项发生更改时，才会发出IsValid事件。 / p>

2。我可以使用类似这样的

<child #varName></child>

@ViewChild('varName') childElement;

然后从父母那里我可以打电话

childElement.IsValid()

但是，因为我已经渲染了子级循环，因此如何在循环中给出唯一的名称以及如何在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钩之后定义。

Answer 2

您可以使用组件选择器：

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

并循环遍历并确定有效性。

Answer 3

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

从父组件角度获取所有子组件的状态

3 个答案: