@viewchildを使用して複数のviewchildrenにアクセスする


149

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

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

     <customcomponent></customcomponent>

</div>

その出力は次のようになります。

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

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

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

<customcomponent #compID></customcomponent>

次に、次のように参照できます。

@ViewChild('compID') test: CustomComponent

これが当てはまらない場合、たとえばインデックスを使用するなど、どのように参照すればよいですか?

(この質問は、以下の回答からわかるように、以前に尋ねられた他の質問のようにElementRefを使用することとは関係ありません)この質問は、複数の@ViewChildへのアクセスとリストクエリの使用に関係します。

回答:


243

@ViewChildrenfrom@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());
}

l—i—v—e——d—e—m—o—


3
._resultsはプライベート関数であると書かれています。これも。コンポーネントは、私にとってリストではなく、単なる単一のコンポーネントです。あなたが提供できる他の助けはありますか?
サムアレクサンダー

20
@SamAlexander this.components.toArray()を使用して、#cmp名のコンポーネントの配列を取得できます
DavidGSola 2017年

2
Ajax応答でどのように機能しますか?、@ ViewChildrenは、初期ビューの後にトリガーされますが、モデル(ngForの場合)の変更後にはトリガーされません。どうすればそのためにトリガーできますか?
elporfirio 2017年

1
@elporfirioを実装AfterViewCheckedし、メソッドを記述しngAfterViewCheckedます。このメソッドは、ビューが更新された後、変更サイクルごとにトリガーされます。その中で、viewChildインスタンスが定義されているかどうかをテストできます。ドキュメントを参照してください
BeetleJuice 2017年

1
気にしないでください。これにより、詳細が説明されます。netbasal.com / …@ ViewChildrenでコンポーネントの名前を使用すると、HTMLで割り当てた#nameを使用した場合とは異なる結果が返されます。
rmcsharry 2017年

75

@ViewChildrenデコレータをQueryListと組み合わせて使用​​します。これらは両方とも「@angular / core」からのものです

@ViewChildren(CustomComponent) customComponentChildren: QueryList<CustomComponent>;

それぞれの子供と何かをすることは次のようになります: this.customComponentChildren.forEach((child) => { child.stuff = 'y' })

特に、angular.ioには、https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts = Parent%20calls%20a%20ViewChildというドキュメントがあり ます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.