ContentChildren
Parameter decorator that configures a content query.
说明
Use to get the QueryList of elements or directives from the content DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.
Content queries are set before the ngAfterContentInit callback is called.
Does not retrieve elements or directives that are in other components' templates, since a component's template is always a black box to its ancestors.
Metadata Properties:
- selector - The directive type or the name used for querying.
- descendants - True to include all descendants, otherwise include only direct children.
- read - Used to read a different token from the queried elements.
使用说明
Here is a simple demonstration of how the ContentChildren decorator can be used.
import {AfterContentInit, ContentChildren, Directive, QueryList} from '@angular/core';
@Directive({selector: 'child-directive'})
class ChildDirective {
}
@Directive({selector: 'someDir'})
class SomeDir implements AfterContentInit {
@ContentChildren(ChildDirective) contentChildren!: QueryList<ChildDirective>;
ngAfterContentInit() {
// contentChildren is set
}
}
Tab-pane example
Here is a slightly more realistic example that shows how ContentChildren decorators can be used to implement a tab pane component.
import {Component, ContentChildren, Directive, Input, QueryList} from '@angular/core';
@Directive({selector: 'pane'})
export class Pane {
@Input() id!: string;
}
@Component({
selector: 'tab',
template: `
<div class="top-level">Top level panes: {{serializedPanes}}</div>
<div class="nested">Arbitrary nested panes: {{serializedNestedPanes}}</div>
`
})
export class Tab {
@ContentChildren(Pane) topLevelPanes!: QueryList<Pane>;
@ContentChildren(Pane, {descendants: true}) arbitraryNestedPanes!: QueryList<Pane>;
get serializedPanes(): string {
return this.topLevelPanes ? this.topLevelPanes.map(p => p.id).join(', ') : '';
}
get serializedNestedPanes(): string {
return this.arbitraryNestedPanes ? this.arbitraryNestedPanes.map(p => p.id).join(', ') : '';
}
}
@Component({
selector: 'example-app',
template: `
<tab>
<pane id="1"></pane>
<pane id="2"></pane>
<pane id="3" *ngIf="shouldShow">
<tab>
<pane id="3_1"></pane>
<pane id="3_2"></pane>
</tab>
</pane>
</tab>
<button (click)="show()">Show 3</button>
`,
})
export class ContentChildrenComp {
shouldShow = false;
show() {
this.shouldShow = true;
}
}
