时间戳

首页 > 解决方案 > 添加新对象时如何防止动态生成的组件重新初始化

javascript - 添加新对象时如何防止动态生成的组件重新初始化

问题描述

我的应用程序的一部分由动态生成的组件组成，这些组件在 *ngFor 循环中创建，如下所示：

<div *ngFor="let actionCategory of actionCategories | keyvalue">
    <h2>{{actionCategory.key}}</h2>
    <div *ngFor="let action of actionCategory.value | keyvalue">
        <app-gearset [action]="action"></app-gearset>
    </div>
    <button mat-button (click)="addComponent(actionCategory)">Add another set</button>
</div>

用户还可以通过单击与该功能相关的按钮来添加更多这些组件，addComponent()如下所示：

  addGearSetComponent(actionCategory) {
    this.actionCategories[actionCategory.key][Object.keys(this.actionCategories[actionCategory.key]).length] = {};
  }

这会在对象的末尾添加一个新的空白对象actionCategory，将一个新组件添加到应用程序的适当部分。问题是每次添加新组件时，已经存在的组件的状态都会重置。

当它们绑定的对象发生更改时，有什么方法可以保持对象中先前组件的状态不变？有没有更好的方法可以基于复杂对象动态生成组件？

标签： javascriptangulartypescript

解决方案

经过几个小时的文档搜索后，我发现了该trackBy功能。[trackBy][1]

看起来通过处理trackBy以下函数，我能够改变 DOM 重新呈现组件的方式：

trackAction(index, action) {
    return action ? action.key : undefined;
}

我承认我并不完全理解这在幕后是如何工作的，但它可以防止页面上存在的组件在添加新组件时被破坏和重新渲染。我将不得不留意性能问题，但我相信这现在可行！:) [1]: https://blog.angular-university.io/angular-2-ngfor/

推荐阅读