Question

我有一个Angular 5组件，可以在其父级中重复任意次。我需要为该组件的每个实例提供一个确定性且唯一的ID，如果需要，可以基于组件@ContentChild。

我尝试使用组件的ViewContainerRef及其包含的@ContentChild上的可用属性，希望从生成的DOM元素中获取ID，但它不是让我到任何地方，感觉有点太hacky。

我对ViewContainerRef，ContentChild，ViewChild等的Angular文档感到困惑，因此我完全有可能错过了API中显而易见的内容。< / p>

Here is a Plunker演示了我的配置。需要唯一ID的组件为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 {}

为重复组件的每个实例生成确定性ID

0 个答案: