Angular – @ViewChildrenでngFor内の要素のリファラーを取得

ngForのループで複数の要素を書き出す場合、それぞれに「#name1」などのアンカーを付けて@ViewChildで取得したかったが以下のようにはできなかった。

<!-- こんなことはできない -->
<div *ngFor="let item of items; let i = index">
  <div #item{{i}}></div>
</div>

@ViewChildrenを使う

当然このようなケースを扱うためのプロパティは用意されていた。
以下のようにするとForの中の要素を取得できる。

<div *ngFor="let item of items; let i = index">
  <div #items></div>
</div>

そしてts側で以下のように取得

export class Page {
  @ViewChildren('items') items: QueryList;
}

この時、itemsはQueryList型になっているが、以下のように配列化してindex指定でRefを取得することができる。

export class Page {
  @ViewChildren('items') items: QueryList;
  ngOnInit() {
    this.items.toArray()
  }
}

Angular