angular - 如何在 Angular 4、5中为动态元素分配哈希ID引用ID

我很抱歉，如果我的问题很傻，我有30多个静态ng-container，带有一些唯一的静态#hashtagID，但是我想在ngFor的帮助下动态创建它们

public lists = ['food', 'book', ........, 'cook']

预期的输出:

<ng-container #food></ng-container>
<ng-container #book></ng-container>
..
..
<ng-container #cook></ng-container>

所以我几乎尝试了所有方法，但是没有运气，

1: <ng-container *ngFor="#id of lists"><ng-container>
2: <ng-container *ngFor="let id of lists" #{{id}}><ng-container>
3: <ng-container *ngFor="let id of lists" #+"id"><ng-container>
4: <ng-container *ngFor="let id of lists" #{id}><ng-container>
5. <div *ngFor="let id of lists" #id></div>
6: <div *ngFor="let id of lists" [id]="id">

我正在将此#hashTagID用作.ts文件中的viewContainerRef。

@ViewChild('food'，{read:ViewContainerRef})私有(private)食物:ViewContainerRef;

请有人帮助我解决此问题。

最佳答案

可能的解决方案是创建一个指令，该指令将哈希作为输入，同时也引用ViewContainerRef:

@Directive({
  selector: '[hash]',
})
export class HashDirective  {
  @Input() hash: string;

  constructor(public vcRef: ViewContainerRef) {}
}

现在，您可以将模板编写为:

<ng-container *ngFor="let item of lists" [hash]="item"></ng-container>

最后，您将能够通过ViewContainerRef获得所需的ViewChildren的引用:

@ViewChildren(HashDirective) private hashes: QueryList<HashDirective>;

lists = ['food', 'book', 'cook'];

getContainerFor(name: string) {
  return this.hashes.find(x => x.hash === name).vcRef;
}

ngAfterViewInit() {
  console.log(this.getContainerFor('food'));
}

Example

关于angular - 如何在 Angular 4、5中为动态元素分配哈希ID引用ID，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49212285/