Angular2でアプリケーションを構築する時に、
親コンポーネントから子コンポーネントを操作したいことが多くあります。
例えば、子コンポーネントの値を取得・変更したい時や、DOMを取得したい時などが挙げられます。
Angular2では、ViewChildren、 ContentChildren を使用することで、
親要素から子要素を参照することができます。
今回はViewChildren、ContentChildren を使用した、子要素の参照方法を紹介します。
ViewChildren とは
コンポーネントのテンプレートの中に配置された子要素をViewChildren と呼びます。
使い方は、@ViewChildren もしくは @ViewChild デコレータを @angular/core からインポートして使用します。
@ViewChildren は複数個取得でき、@ViewChild は１つだけ取得するという違いがあります。
次のコードでは、@ViewChildren を使用して子要素を参照しています。
parent.ts
[js]
import { Component, ViewChildren } from ‘@angular/core’
import { ChildComponent } from ‘./child’;
@Component({
selector: ‘my-parent’,
providers: [],
template: `
`
})
export class ParentComponent implements AfterViewInit {
logs = [ ‘foo’, ‘bar’, ‘baz’ ];
count = 0;
@ViewChildren(ChildComponent) children: QueryList
// 子コンポーネントの初期化後に実行
ngAfterViewInit() {
this.count = this.children.length;
}
}
[/js]
次のコードがデコレータの使用部分です。
[js]
@ViewChildren(ChildComponent) children: QueryList
[/js]
@ViewChildren() の引数に、ChildComponent を渡すことで、自身のテンプレート内の ChildComponent を取得するよう指定します。
取得結果としての返り値は QueryList と呼ばれる、配列に似た要素集合で取得するのが一般的です。QueryListは、forEach メソッドでの繰り返し処理や、 length プロパティによる要素数の取得が可能です。
[js]
this.count = this.children.length;
[/js]
[aside type=”normal”]
【公式ドキュメント】 QueryList – angular.io
[/aside]
次のデモでは ChildComponent の数を出力しています。
ContentChildren とは
開始タグと終了タグの間に置かれた要素を ContentChildren と呼びます。
使い方はViewChildrenと同じく、@ContentChildren、 @ContentChild デコレータを @angular/core からインポートして使用します。
@ContentChildren は複数個取得でき、@ContentChild は１つだけ取得するという違いがあります。
次のコードでは、@ContentChildren を使用して子要素を参照しています。
parent.ts
[js]
import { Component, ContentChildren, QueryList, AfterContentInit } from ‘@angular/core’
// Name
@Component({
selector: ‘my-name’,
template: `
`
})
class NameComponent {}
// Child
@Component({
selector: ‘my-child’,
template: `
`
})
class ChildComponent implements AfterContentInit {
count = 0;
@ContentChildren(NameComponent) children: QueryList
// 子要素の初期化後に実行
ngAfterContentInit() {
this.count = this.children.length;
}
}
// Parent
@Component({
selector: ‘my-parent’,
template: `
`
})
export class ParentComponent implements AfterContentInit, AfterViewInit {
members = [ ‘のび太’, ‘スネ夫’, ‘ジャイアン’, ‘出木杉’ ];
}
[/js]
ParentComponent のテンプレート部分に注目してください。
[js]
template: `
`
[/js]
ChildComponent の要素の中にolリストが含まれています。
このolリストが ChildComponent の ContentChild となります。
次のデモでは @ContentChildren を使って ChildComponent の中にある、NameComponent の数を出力しています。
まとめ
今回紹介した内容は、コンポーネント・要素を参照するための基本な知識なので、しっかり抑えておきたいところです。
このViewやContentという考え方は、Lifecycle Hooks でも応用が効き、
Angular2でのアプリケーション構築では欠かすことのできない重要な概念です。
あわせて Lifecycle Hooks の記事を読むとより一層理解が深まるでしょう。
[aside type=”normal”]
【関連記事】 Angular2のLifecycle Hooksを理解する
[/aside]
参考
