时间戳

首页 > 解决方案 > 通过唯一 ID 识别 Angular 组件实例

angular - 通过唯一 ID 识别 Angular 组件实例

问题描述

我正在开发一个 Angular 应用程序，我在其中创建了一个名为 TripSummaryComponent 的组件，我用它来以这种方式显示旅行信息：

<div *ngFor="let trip of trips">
    <trip-summary [trip]="trip"></trip-summary>
</div>

在此处输入图像描述 现在我的需要是：如何在 DOM 中生成 TripSummaryComponent 的每个实例后，通过唯一的 id 来识别它。

提前感谢您的帮助。

标签： angularangular-components

解决方案

我不建议通过输入将 ID 传递给子组件。为什么不通过 UUID 生成器直接在子组件本身中创建一个（您需要提供第三方库，例如uuid 生成器）：

零件

readonly id: string;

ngOnInit() {
  this.id = uuid.v4();
}

模板

<div [attr.id]="id">
  <!-- rest of the template -->
</div>

推荐阅读