填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
API 参考手册
API > @angular/core

ViewChild

属性装饰器，用于配置一个视图查询。 变更检测器会在视图的 DOM 中查找能匹配上该选择器的第一个元素或指令。 如果视图的 DOM 发生了变化，出现了匹配该选择器的新的子节点，该属性就会被更新。

Property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes, and a new child matches the selector, the property is updated.

查看"说明"...

说明

在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询。

View queries are set before the ngAfterViewInit callback is called.

元数据属性：

Metadata Properties:

  • selector - 用于查询的指令类型或名字。

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

  • read - 从查询到的元素中读取另一个令牌。

    read - read a different token from the queried elements.

  • 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.

所支持的选择器包括：

Supported selectors include:

  • 任何带有 @Component 或 @Directive 装饰器的类

    any class with the @Component or @Directive decorator

  • 字符串形式的模板引用变量（比如可以使用 @ViewChild('cmp') 来查询 <my-component #cmp></my-component>

    a template reference variable as a string (e.g. query <my-component #cmp></my-component> with @ViewChild('cmp'))

  • 组件树中任何当前组件的子组件所定义的提供商（比如 @ViewChild(SomeService) someService: SomeService ）

    any provider defined in the child component tree of the current component (e.g. @ViewChild(SomeService) someService: SomeService)

  • 任何通过字符串令牌定义的提供商（比如 @ViewChild('someToken') someTokenVal: any ）

    any provider defined through a string token (e.g. @ViewChild('someToken') someTokenVal: any)

  • TemplateRef（比如可以用 @ViewChild(TemplateRef) template; 来查询 <ng-template></ng-template>）

    a TemplateRef (e.g. query <ng-template></ng-template> with @ViewChild(TemplateRef) template;)

选项

使用说明

import {Component, Directive, Input, ViewChild} from '@angular/core'; @Directive({selector: 'pane'}) export class Pane { // TODO(issue/24571): remove '!'. @Input() id !: string; } @Component({ selector: 'example-app', template: ` <pane id="1" *ngIf="shouldShow"></pane> <pane id="2" *ngIf="!shouldShow"></pane> <button (click)="toggle()">Toggle</button> <div>Selected: {{selectedPane}}</div> `, }) export class ViewChildComp { @ViewChild(Pane, {static: false}) set pane(v: Pane) { setTimeout(() => { this.selectedPane = v.id; }, 0); } selectedPane: string = ''; shouldShow = true; toggle() { this.shouldShow = !this.shouldShow; } }
      
      
  1. import {Component, Directive, Input, ViewChild} 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: 'example-app',
  11.   template: `
  12.     <pane id="1" *ngIf="shouldShow"></pane>
  13.     <pane id="2" *ngIf="!shouldShow"></pane>
  14.     
  15.     <button (click)="toggle()">Toggle</button>
  16.        
  17.     <div>Selected: {{selectedPane}}</div> 
  18.   `,
  19. })
  20. export class ViewChildComp {
  21.   @ViewChild(Pane, {static: false})
  22.   set pane(v: Pane) {
  23.     setTimeout(() => { this.selectedPane = v.id; }, 0);
  24.   }
  25.   selectedPane: string = '';
  26.   shouldShow = true;
  27.   toggle() { this.shouldShow = !this.shouldShow; }
  28. }

例子

Example

import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core'; @Directive({selector: 'child-directive'}) class ChildDirective { } @Component({selector: 'someCmp', templateUrl: 'someCmp.html'}) class SomeCmp implements AfterViewInit { // TODO(issue/24571): remove '!'. @ViewChild(ChildDirective, {static: false}) child !: ChildDirective; ngAfterViewInit() { // child is set } }
      
      
  1. import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core';
  2.  
  3. @Directive({selector: 'child-directive'})
  4. class ChildDirective {
  5. }
  6.  
  7. @Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
  8. class SomeCmp implements AfterViewInit {
  9.   // TODO(issue/24571): remove '!'.
  10.   @ViewChild(ChildDirective, {static: false}) child !: ChildDirective;
  11.  
  12.   ngAfterViewInit() {
  13.     // child is set
  14.   }
  15. }

例子

Example

import {Component, Directive, Input, ViewChild} from '@angular/core'; @Directive({selector: 'pane'}) export class Pane { // TODO(issue/24571): remove '!'. @Input() id !: string; } @Component({ selector: 'example-app', template: ` <pane id="1" *ngIf="shouldShow"></pane> <pane id="2" *ngIf="!shouldShow"></pane> <button (click)="toggle()">Toggle</button> <div>Selected: {{selectedPane}}</div> `, }) export class ViewChildComp { @ViewChild(Pane, {static: false}) set pane(v: Pane) { setTimeout(() => { this.selectedPane = v.id; }, 0); } selectedPane: string = ''; shouldShow = true; toggle() { this.shouldShow = !this.shouldShow; } }
      
      
  1. import {Component, Directive, Input, ViewChild} 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: 'example-app',
  11.   template: `
  12.     <pane id="1" *ngIf="shouldShow"></pane>
  13.     <pane id="2" *ngIf="!shouldShow"></pane>
  14.     
  15.     <button (click)="toggle()">Toggle</button>
  16.        
  17.     <div>Selected: {{selectedPane}}</div> 
  18.   `,
  19. })
  20. export class ViewChildComp {
  21.   @ViewChild(Pane, {static: false})
  22.   set pane(v: Pane) {
  23.     setTimeout(() => { this.selectedPane = v.id; }, 0);
  24.   }
  25.   selectedPane: string = '';
  26.   shouldShow = true;
  27.   toggle() { this.shouldShow = !this.shouldShow; }
  28. }