Angular 性能

使用 Ionic 组件的 *ngFor

¥*ngFor with Ionic Components

当将 *ngFor 与 Ionic 组件一起使用时，我们建议使用 Angular 的 trackBy 选项。这使得 Angular 能够以更有效的方式管理更改传播，并且仅更新组件内部的内容，而不是完全重新创建组件。

¥When using *ngFor with Ionic components, we recommend using Angular's trackBy option. This allows Angular to manage change propagation in a much more efficient way and only update the content inside of the component rather than re-create the component altogether.

通过使用 trackBy，你可以为每个循环元素提供稳定的标识，以便 Angular 可以跟踪迭代器内的插入和删除。下面是如何使用 trackBy 的示例：

¥By using trackBy you can provide a stable identity for each loop element so Angular can track insertions and deletions within the iterator. Below is an example of how to use trackBy:

home.page.html

<ion-item *ngFor="let item of items; trackBy:trackItems">
  <ion-label>{{ item.value }}</ion-label>
</ion-item>

home.component.ts

items = [
  { id: 0, value: 'Item 0' },
  { id: 1, value: 'Item 1' },
  ...
]

trackItems(index: number, itemObject: any) {
  return itemObject.id;
}

在此示例中，我们有一个名为 items 的对象数组。每个对象包含一个 value 和一个 id。使用 trackBy，我们传递一个 trackItems 函数，该函数返回每个对象的 id。该 id 用于为每个循环元素提供稳定的标识。

¥In this example, we have an array of objects called items. Each object contains a value and an id. Using trackBy, we pass a trackItems function which returns the id of each object. This id is used to provide a stable identity for each loop element.

有关 Angular 如何使用 ngFor 管理更改传播的更多信息，请参阅 https://angular.io/api/common/NgForOf#change-propagation。

¥For more information on how Angular manages change propagation with ngFor see https://angular.io/api/common/NgForOf#change-propagation.