ViewChildren
Parameter decorator that configures a view query.
说明
Use to get the QueryList of elements or directives from the view 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.
View queries are set before the ngAfterViewInit callback is called.
Metadata Properties:
- selector - The directive type or the name used for querying.
- read - Used to read a different token from the queried elements.
使用说明
import {AfterViewInit, Component, Directive, QueryList, ViewChildren} from '@angular/core';
@Directive({selector: 'child-directive'})
class ChildDirective {
}
@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
class SomeCmp implements AfterViewInit {
@ViewChildren(ChildDirective) viewChildren!: QueryList<ChildDirective>;
ngAfterViewInit() {
// viewChildren is set
}
}
Another example
import {AfterViewInit, Component, Directive, Input, QueryList, ViewChildren} from '@angular/core';
@Directive({selector: 'pane'})
export class Pane {
@Input() id!: string;
}
@Component({
selector: 'example-app',
template: `
<pane id="1"></pane>
<pane id="2"></pane>
<pane id="3" *ngIf="shouldShow"></pane>
<button (click)="show()">Show 3</button>
<div>panes: {{serializedPanes}}</div>
`,
})
export class ViewChildrenComp implements AfterViewInit {
@ViewChildren(Pane) panes!: QueryList<Pane>;
serializedPanes: string = '';
shouldShow = false;
show() {
this.shouldShow = true;
}
ngAfterViewInit() {
this.calculateSerializedPanes();
this.panes.changes.subscribe((r) => {
this.calculateSerializedPanes();
});
}
calculateSerializedPanes() {
setTimeout(() => {
this.serializedPanes = this.panes.map(p => p.id).join(', ');
}, 0);
}
}
