ContentChild

decorator

Configures a content query.

说明

You can use ContentChild to get the first element or the directive matching the selector from the content DOM. If the content DOM changes, and a new child matches the selector, the property will be updated.

Content queries are set before the ngAfterContentInit callback is called.

Metadata Properties:

selector - the directive type or the name used for querying.
read - read a different token from the queried element.
static - whether or not to resolve query results before change detection runs (i.e. return static results only). If this option is not provided, the compiler will fall back to its default behavior, which is to use query results to determine the timing of query resolution. If any query results are inside a nested view (e.g. *ngIf), the query will be resolved after change detection runs. Otherwise, it will be resolved before change detection runs.

选项

使用说明

Example

      
      import {AfterContentInit, ContentChild, Directive} from '@angular/core';
 
@Directive({selector: 'child-directive'})
class ChildDirective {
}
 
@Directive({selector: 'someDir'})
class SomeDir implements AfterContentInit {
  @ContentChild(ChildDirective, {static: false}) contentChild !: ChildDirective;
 
  ngAfterContentInit() {
    // contentChild is set
  }
}

Example

      
      import {Component, ContentChild, Directive, Input} from '@angular/core';
 
@Directive({selector: 'pane'})
export class Pane {
  // TODO(issue/24571): remove '!'.
  @Input() id !: string;
}
 
@Component({
  selector: 'tab',
  template: `
    <div>pane: {{pane?.id}}</div> 
  `
})
export class Tab {
  // TODO(issue/24571): remove '!'.
  @ContentChild(Pane, {static: false}) pane !: Pane;
}
 
@Component({
  selector: 'example-app',
  template: `
    <tab>
      <pane id="1" *ngIf="shouldShow"></pane>
      <pane id="2" *ngIf="!shouldShow"></pane>
    </tab>
    
    <button (click)="toggle()">Toggle</button>
  `,
})
export class ContentChildComp {
  shouldShow = true;
 
  toggle() { this.shouldShow = !this.shouldShow; }
}

说明link

选项link

使用说明link

Examplelink

Examplelink

说明

选项

使用说明

Example

Example