Angular5の@ViewChildと@ViewChildrenの違い
Angular の@ViewChildren もしくは @ViewChildを使用して
親コンポーネントから子コンポーネントのメソッドなどにアクセスできるようになります
@ViewChildren は複数の子コンポーネントのリスト取得する、@ViewChild は子コンポーネントを１つだけ取得するという違いがあります。
@ViewChildのサンプル
cn-component.ts
上記CnComponentクラスのテンプレートは下記の様な感じになります。
cn-component.html
#+変数名の記述によってテンプレート内に参照変数を宣言出来ます。
この場合#dtemという記述でdtemという名前の参照変数を宣言しています。
@ViewChildrenのサンプル
cn-parent.ts
@ViewChildren() の引数に、ChildComponent を渡すことで、
自身のテンプレート内の ChildComponent を取得するよう指定します。
取得結果としての返り値は QueryList と呼ばれる、配列に似た要素集合で取得するのが一般的です。
QueryListは、forEach メソッドでの繰り返し処理や、 length プロパティによる要素数の取得が可能です。
