角度:当父列表被替换时，如何将组件状态保留在嵌套的组件树中

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-directive。因此，项目的 id 应该是唯一的(两次乘以 2.2)。这是您的代码的工作示例： https://stackblitz.com/edit/angular-nested-components-updated-fprktk