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 プロパティによる要素数の取得が可能です。

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA