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

【问题标题】：Angular: How do I keep component state in nested component tree when parent list is replacedAngular：替换父列表时如何在嵌套组件树中保持组件状态
【发布时间】：2019-08-22 18:04:01
【问题描述】：

我正在尝试设置一个包含 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

期望：

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

【问题讨论】：

标签： angular nested components

【解决方案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

【讨论】：

【解决方案2】：

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

【讨论】：