Генерация детерминированного идентификатора для каждого экземпляра повторяемого компонента

Question

У меня есть компонент Angular 5, который может повторяться любое количество раз в пределах его родителя.Мне нужен детерминированный и уникальный идентификатор для каждого экземпляра этого компонента, который может быть основан на @ContentChild компонента, если это необходимо.

Я пробовал работать с доступными свойствами в ViewContainerRef компонента и в его содержимом@ContentChild в надежде получить ID из сгенерированных элементов DOM, но это никуда не денется и мне немного не по себе.

Я борюсь с документацией Angular для ViewContainerRef, ContentChild, ViewChild и т. Д., Поэтому вполне возможно, что я упустил что-то очевидное в API.

Вот Plunker , демонстрирующий мою конфигурацию.Компонент, для которого требуется уникальный идентификатор: ContainerComponent.

ContainerComponent

import {Component, ContentChild, TemplateRef, ElementRef} from '@angular/core'

@Component({
  selector: 'app-container',
  template: `
  <div *ngIf="content">
    <h5>Container ID: {{id}}</h5>
    <div style="margin-left: 10px">
      <ng-container *ngTemplateOutlet="content"></ng-container>
    </div>
  </div>
  `,
})
export class ContainerComponent {

  @ContentChild("content")
  public content: TemplateRef<ElementRef>;

  public get id(): string {
    return "container_?";
  }
}

AppComponent

import { Component, NgModule, VERSION} from '@angular/core'
import { BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div id="parent">
      <app-container>
        <ng-template #content>
          <app-child1></app-child1>
        </ng-template>
      </app-container>
      <app-container>
        <ng-template #content>
          <app-child2></app-child2>
        </ng-template>
      </app-container>
    </div>
  `
})
export class AppComponent {}