Question

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

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

这意味着，我有两个部分：父部分和子部分。

父组件：

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

  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方法。但是子级组件仅在页面加载时才起作用。.每次选择复选框时，我需要将值从父级传递给子级。 / p>

请检查此stackblitz

Answer 1

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

如果您想为子组件添加一些通用性，我建议您将抽象类与扩展方法一起使用。

Answer 2

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

使用此方法，您将始终拥有孩子可用的最新数据。

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

Answer 3

如果对子组件的引用未更改，则子组件将不会知道该数组已更改。

执行push（）时，引用不会更改。您必须对列表进行不可变的更新。因此，替换

this.groupList.push(rowData.email);

作者

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

例如...

要检查子组件中的更改，不能将console.log放在ngOnInit中。实际上，此方法仅被调用一次。在ngOnChange中进行检查或直接在模板中显示。

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

3 个答案: