角:替换父列表时，如何在嵌套组件树中保持组件状态？

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的作用。有了它，角只会刷新需要刷新的东西。我假设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