简化 *ngFor trackBy 的使用

TrackByService 是一个实用工具服务，旨在简化 Angular 模板中最常见需求之一：TrackByFunction 的实现。请参阅 Angular 官方文档的这一页了解其用途。

快速开始

您无需在模块或组件级别提供 TrackByService，因为它已经在根注入器中提供。您可以直接在组件中注入并开始使用它。为了获得更好的类型支持，您可以传入迭代项目的类型。

import { TrackByService } from '@abp/ng.core';
import { inject } from '@angular/core';

@Component({
  /* 类元数据 */
})
class DemoComponent {
  list: Item[];

  public readonly track = inject(TrackByService<Item>);
}

注意到 track 是 public 且 readonly 了吗？这是因为我们将在一些示例中直接在组件模板中调用 TrackByService 实例的方法。这可能被视为一种反模式，但它有其自身的优势，特别是在利用组件继承时。您也可以始终使用公共组件属性替代。

这些成员也作为独立函数导出。 如果您不想注入 TrackByService，可以随时在类中直接导入并使用这些函数。

使用方法

有两种可用方法：

1. 将 TrackByService 注入到组件中并使用其成员。
2. 直接在组件属性上使用导出的高阶函数。

如何通过键追踪项目

您可以使用 by 方法获取一个 TrackByFunction，该函数根据对象的某个键来追踪迭代对象。为了获得类型支持，您可以传入迭代项目的类型。

<!-- DemoComponent 的模板 -->

<div *ngFor="let item of list; trackBy: track.by('id')">{ { item.name } }</div>

by 作为独立函数导出，名为 trackBy。

import { trackBy } from "@abp/ng.core";

@Component({
  template: `
    <div
      *ngFor="let item of list; trackBy: trackById"
    >
      { { item.name } }
    </div>
  `,
})
class DemoComponent {
  list: Item[];

  trackById = trackBy<Item>('id');
}

如何通过深层嵌套键追踪

您可以使用 byDeep 方法获取一个 TrackByFunction，该函数根据深层嵌套键来追踪迭代对象。为了获得类型支持，您可以传入迭代项目的类型。

<!-- DemoComponent 的模板 -->

<div
  *ngFor="let item of list; trackBy: track.byDeep('tenant', 'account', 'id')"
>
  { { item.tenant.name } }
</div>

byDeep 作为独立函数导出，名为 trackByDeep。

import { trackByDeep } from "@abp/ng.core";

@Component({
  template: `
    <div
      *ngFor="let item of list; trackBy: trackByTenantAccountId"
    >
      { { item.name } }
    </div>
  `,
})
class DemoComponent {
  list: Item[];

  trackByTenantAccountId = trackByDeep<Item>('tenant', 'account', 'id');
}