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

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

请检查此stackblitz

Answer 1

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

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

Answer 2

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

这里是堆叠闪电战：https://angular-ivy-oui6mj.stackblitz.io