1. ホーム
  2. angular

[解決済み] viewchildを使用して複数のviewchildrenにアクセスする

2022-04-22 14:57:12

質問

私はカスタムコンポーネントを作成し、forループに配置しました。

<div *ngFor="let view of views">

     <customcomponent></customcomponent>

</div>

という出力になる。

<customcomponent></customcomponent>
<customcomponent></customcomponent>
<customcomponent></customcomponent>

これらのコンポーネントの数が変化する場合、@viewchild構文または他の手段を使用して、これらのコンポーネントへの参照を取得する方法を知りたいのです。

コンポーネントに名前を付けることができる場合、例えば

<customcomponent #compID></customcomponent>

すると、次のように参照できるようになる。

@ViewChild('compID') test: CustomComponent

そうでない場合、例えばインデックスを使用する場合、どのように参照すればよいのでしょうか?

(この質問は、複数の@ViewChildへのアクセスおよびリストクエリの使用に関するものです。

どのように解決するのですか?

使用方法 @ViewChildren から @angular/core を使用して、コンポーネントへの参照を取得します。

テンプレート

<div *ngFor="let v of views">
    <customcomponent #cmp></customcomponent>
</div>

コンポーネント

import { ViewChildren, QueryList } from '@angular/core';

/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components:QueryList<CustomComponent>;

ngAfterViewInit(){
    // print array of CustomComponent objects
    console.log(this.components.toArray());
}

̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶