Angular5の@ViewChildと@ViewChildrenの違い

Angular5の@ViewChildと@ViewChildrenの違い

Angular の@ViewChildren もしくは @ViewChildを使用して親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになります。
@ViewChildren は複数の子コンポーネントのリスト取得する、@ViewChild は子コンポーネントを1つだけ取得するという違いがあります。
@ViewChildのサンプル
cn-component.ts

上記CnComponentクラスのテンプレートは下記の様な感じになります。
cn-component.html

#+変数名の記述によってテンプレート内に参照変数を宣言出来ます。
この場合#dtemという記述でdtemという名前の参照変数を宣言しています。
@ViewChildrenのサンプル
cn-parent.ts

@ViewChildren() の引数に、ChildComponent を渡すことで、
自身のテンプレート内の ChildComponent を取得するよう指定します。
取得結果としての返り値は QueryList と呼ばれる、配列に似た要素集合で取得するのが一般的です。
QueryListは、forEach メソッドでの繰り返し処理や、 length プロパティによる要素数の取得が可能です。

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました