ContentChildren

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 } }
      
      
  1. import {AfterContentInit, ContentChildren, Directive, QueryList} from '@angular/core';
  2.  
  3. @Directive({selector: 'child-directive'})
  4. class ChildDirective {
  5. }
  6.  
  7. @Directive({selector: 'someDir'})
  8. class SomeDir implements AfterContentInit {
  9. // TODO(issue/24571): remove '!'.
  10. @ContentChildren(ChildDirective) contentChildren !: QueryList<ChildDirective>;
  11.  
  12. ngAfterContentInit() {
  13. // contentChildren is set
  14. }
  15. }

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 { @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; } }
      
      
  1. import {Component, ContentChildren, Directive, Input, QueryList} from '@angular/core';
  2.  
  3. @Directive({selector: 'pane'})
  4. export class Pane {
  5. // TODO(issue/24571): remove '!'.
  6. @Input() id !: string;
  7. }
  8.  
  9. @Component({
  10. selector: 'tab',
  11. template: `
  12. <div class="top-level">Top level panes: {{serializedPanes}}</div>
  13. <div class="nested">Arbitrary nested panes: {{serializedNestedPanes}}</div>
  14. `
  15. })
  16. export class Tab {
  17. @ContentChildren(Pane) topLevelPanes !: QueryList<Pane>;
  18. @ContentChildren(Pane, {descendants: true}) arbitraryNestedPanes !: QueryList<Pane>;
  19.  
  20. get serializedPanes(): string {
  21. return this.topLevelPanes ? this.topLevelPanes.map(p => p.id).join(', ') : '';
  22. }
  23. get serializedNestedPanes(): string {
  24. return this.arbitraryNestedPanes ? this.arbitraryNestedPanes.map(p => p.id).join(', ') : '';
  25. }
  26. }
  27.  
  28. @Component({
  29. selector: 'example-app',
  30. template: `
  31. <tab>
  32. <pane id="1"></pane>
  33. <pane id="2"></pane>
  34. <pane id="3" *ngIf="shouldShow">
  35. <tab>
  36. <pane id="3_1"></pane>
  37. <pane id="3_2"></pane>
  38. </tab>
  39. </pane>
  40. </tab>
  41. <button (click)="show()">Show 3</button>
  42. `,
  43. })
  44. export class ContentChildrenComp {
  45. shouldShow = false;
  46.  
  47. show() { this.shouldShow = true; }
  48. }