代码之家 › 专栏 › 技术社区 › Munna Babu

如何为angular 4、5中的动态元素分配哈希ID ref ID

typescript angular

Munna Babu · 技术社区 · 6 年前

如果我的问题很愚蠢,我很抱歉,我有30多个静态ng容器,其中包含一些唯一的静态#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用作中的viewContainerRef。ts文件。

@ViewChild('food',{read:ViewContainerRef})私人食品:ViewContainerRef;

请有人帮我解决这个问题。

1 回复 | 直到 6 年前

yurzui 6 年前

可能的解决方案是创建一个将哈希作为输入并引用 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