@ComponentのqueriesプロパティでContentChildrenやViewChildrenにアクセスする
@ComponentのqueriesプロパティにContentChildrenやViewChildrenを指定しておくとデコレーターを利用しなくてもContentChildrenやViewChildrenにアクセスできます。
以下のサンプルではWrapコンポーネントでViewChildrenに指定された<child no=”1″></child>やContentChildrenに指定された<child no=”2″></child>にアクセスを行なっています。
import {
Component,
Directive,
QueryList,
AfterViewInit,
AfterContentInit,
ViewChildren,
ContentChildren,
Input
} from '@angular/core';
//child
@Directive({
selector: 'child'
})
export class Child {
@Input() no: String;
}
//Wrap
@Component({
selector: 'wrap',
queries: {
contentChildren: new ContentChildren(Child),
viewChildren: new ViewChildren(Child)
},
template: `
<child no="1"></child>
`,
})
export class Wrap implements AfterViewInit , AfterContentInit {
contentChildren: QueryList<Child>
viewChildren: QueryList<Child>
ngAfterContentInit() {
this.contentChildren.map(child => {
console.log(child.no);
});
}
ngAfterViewInit() {
this.viewChildren.map(child => {
console.log(child.no);
});
}
}
//app-root
@Component({
selector: 'app-root',
template: `
<wrap><child no="2"></child></wrap>
`,
})
export class AppRoot{}参考URL
queries property - DirectiveMetadata class - angular2.web_worker.worker library - Dart API
登録日 : 2017年02月02日 最終更新日 : 2017年2月2日