Angular：替换父列表后，如何在嵌套组件树中保持组件状态

Question

我正在尝试建立一个包含3层嵌套子级的展开/折叠列表。单击每个项目将刷新列表。当前，“展开”状态存储在“项目”组件中，因此当替换列表时，该组件将被破坏并丢失“展开”状态。

我尝试过的事情

我已经通过将“组”提取到其自己的组件中来解决了类似的问题，但这是在未嵌套的列表中。我似乎无法在整个列表“上方”的水平上提取此“展开”标志

这将是一个大小合理的列表，因此我可以尝试更新列表而不用“替换”它，但这听起来像是灾难的秘诀。

样品项目数据

{
  "Id": "2",
  "Children": [
    {
      "Id": "2.1",
      "Children": [
        {
          "Id": "2.2",
          "Children": []
        }
      ]
    },
    {
      "Id": "2.2",
      "Children": []
    }
  ]
}

然后我递归地设置组件

# item.component.html

<li>
  <div *ngIf="item.Children.length === 0">{{item.Id}}</div>

  <div *ngIf="item.Children.length > 0">
    <button (click)="expanded = !expanded">{{item.Id}}</button>
    <ul *ngIf="expanded">

      <item
        *ngFor="let subItem of item.Children"
        [item]="subItem">
      </item>

    </ul>
  </div>
</li>

孤立的示例

我在StackBlitz上设置了一个孤立的示例：

https://stackblitz.com/edit/angular-nested-components-updated-xavyfe

期望：

我希望即使更新列表，扩展/折叠状态也将保持不变。

Answer 1

这就是trackBy的作用。有了它，Angular将仅刷新需要刷新的内容。我假设Id在这里是唯一的。

在模板中：

      <item
        *ngFor="let subItem of item.Children; trackBy: trackById"
        [item]="subItem">
      </item>

在TS中：

  trackById = (item) => item.Id;

https://stackblitz.com/edit/angular-nested-components-updated-ng4gac

Answer 2

您可以将trackByFunction传递给ngFor指令。因此，您的商品ID应该是唯一的（2.2的两倍）。这是您的代码的有效示例：https://stackblitz.com/edit/angular-nested-components-updated-fprktk