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 プロパティによる要素数の取得が可能です。
元々Javaエンジニアからはじまり、気付けばJS(ES6)、AWS、Python3.6、OutsystemsPlatform、PHPと色々やってました。
得意技: Java、JS(ES6)、AWSの一部リソース
勉強中: AWSの各種リソースと、Python3.6
MarkDownからASCiiDocへ目覚めつつある今日この頃。
座右の銘は「一言芳恩」「華麗奔放」「不決断こそ最大の害悪である」です。
コメント