模板语法
服务端渲染
API / @angular/core

ContentChild

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.

选项

使用说明

Example

import {AfterContentInit, ContentChild, Directive} from '@angular/core'; @Directive({selector: 'child-directive'}) class ChildDirective { } @Directive({selector: 'someDir'}) class SomeDir implements AfterContentInit { // TODO(issue/24571): remove '!'. @ContentChild(ChildDirective) 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) 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; } }