Configures a content query.
说明
You can use ContentChildren 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.
Metadata Properties:
- selector - the directive type or the name used for querying.
- descendants - include only direct children or all descendants.
- read - read a different token from the queried elements.
使用说明
Basic Example
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 { // TODO(issue/24571): remove '!'. @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 { // TODO(issue/24571): remove '!'. @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 { // TODO(issue/24571): remove '!'. @ContentChildren(Pane) topLevelPanes !: QueryList<Pane>; // TODO(issue/24571): remove '!'. @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; } }
