每次函数调用时如何加载组件？

Question

我正在使用 Angular，我正在尝试执行可重复使用的操作，例如批量更新、批量删除、批量停用。

我在另一个组件中使用了所有这些操作，并希望将其用作通用方法。

也就是说，我有两个组件：父组件和子组件。

父组件：

在父组件中，我正在使用一个表格（每行带有复选框）。 在复选框中我使用了一种方法，

  rowDataCheck(event, rowData) {
    if (event.target.checked) {
      this.groupList.push(rowData);
     } else {
      this.groupList = this.groupList.filter(item => item.id !== rowData.id);
     } 
  }

该值存储在grouplist[] 中。当页面加载（ngOnint）groupList=[]。 例如：-

1. when ngOnit() loads = this.grouplist=[];

2. when I check 1st row = this.grouplist=[1];

3. when I check 2st row = this.grouplist=[1,2];

4. Unchecking and checking changes the groupList value(conditions give above)

子组件：

选中复选框后，我想将 groupList 值传递给子组件。

问题::

为了将值从父级传递给子级，我使用了@input 方法。但是子组件仅在页面加载时才起作用。。每次选中复选框时，我都需要将值从父级传递给子级。

请查看stackblitz

Answer 1

如果对数组的引用没有改变，子组件将不会知道数组已经改变。

当你执行 push() 时，引用不会改变。您必须对列表进行不可变更新。所以替换

this.groupList.push(rowData.email);

通过

this.groupList = [...this.groupList, rowData.email];

例如……

要检查子组件的变化，你不能把你的 console.log 放在 ngOnInit 中。此方法仅在真正开始时调用一次。在 ngOnChange 中查看或直接在模板中显示。

Answer 2

我会改为将复选框与一个属性绑定，并将整个列表传递给我可以进行所有处理的子项（最好在单独的服务中）。

有了这个，您将始终拥有孩子可以使用的最新数据。

这里是堆栈闪电战：https://stackblitz.com/edit/angular-ivy-mtdavn

Answer 3

实际上你在@Input 中使用了数组。它是引用类型，您可以随时在子组件中使用它。它会起作用并显示您的@Input 的实际状态。

如果你想为你的子组件增加一些通用性，我可以推荐使用抽象类和方法作为扩展。