填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

ContentChildren

用於配置內容查詢的引數裝飾器。

Parameter decorator that configures a content query.

檢視"說明"...

說明

用於從內容 DOM 中獲取元素或指令的 QueryList。每當新增、刪除或移動子元素時,此查詢列表都會更新,並且其可觀察物件 changes 都會發出新值。

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.

在呼叫 ngAfterContentInit 回呼(Callback)之前設定的內容查詢。

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 - 要查詢的指令型別或名稱。

    selector - The directive type or the name used for querying.

  • 後代 - 包含所有後代時為 true,否則僅包括直接子代。

    descendants - If true include all descendants of the element. If false then only query direct children of the element.

  • emitDistinctChangesOnly - The QueryList#changes observable will emit new values only if the QueryList result has changed. When false the changes observable might emit even if the QueryList has not changed. Note: * This config option is deprecated, it will be permanently set to true and removed in future versions of Angular.

  • read - 用於從查詢到的元素中讀取不同的令牌。

    read - Used to read a different token from the queried elements.

Further information available in the Usage Notes...

選項

使用說明

這裡是如何使用 ContentChildren 裝飾器的簡單示範。

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;
  }
}