Angular v8 - @ViewChild 静态 true 或 false

Question

Angular v8 刚刚发布。虽然它主要是向后兼容的，但也有一些重大变化。

根据 Angular 的 Changelog 一个核心变化是（我引用）：

"在 Angular 版本 8 中，要求所有 @ViewChild 和 @ContentChild 查询都有一个 'static' 标志，指定查询是 'static' 还是 'dynamic'."

还声明在大多数情况下只需设置 { static: false } 即可。

@ViewChild('selectorName', { static: false }) varName: any;

我的问题是什么时候应该将此属性（静态）设置为 true？以及它将如何影响我的申请？？？

Answer 1

来自文档：

How do I choose which static flag value to use: true or false?

In the official API docs, we have always recommended retrieving query results in ngAfterViewInit for view queries and ngAfterContentInit for content queries. This is because by the time those lifecycle hooks run, change detection has completed for the relevant nodes and we can guarantee that we have collected all the possible query results.

Most applications will want to use {static: false} for the same reason. This setting will ensure query matches that are dependent on binding resolution (e.g. results inside *ngIfs or *ngFors) will be found by the query.

There are rarer cases where {static: true} flag might be necessary (see answer here).

https://angular.io/guide/static-query-migration

Answer 2

如果要访问 ngOnInit 中的 ViewChild，请使用 { static: true }。

使用 { static: false } 将只能在 ngAfterViewInit 中访问。当您的模板中有结构指令（*ngIf 等）时，这也是您要执行的操作。

大多数情况下 { static: false } 都可以。

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit, AfterViewInit
{
  @ViewChild('elementA', { static: true }) elementStatic: ElementRef<HTMLElement>;
  @ViewChild('elementB', { static: false }) elementDynamic: ElementRef<HTMLElement>;
        
  public ngOnInit(): void
  {
    this.elementStatic.nativeElement; // Ok
    this.elementDynamic.nativeElement; // ERROR TypeError: Cannot read property 'nativeElement' of undefined 
  }
  
  public ngAfterViewInit(): void
  {
    this.elementStatic.nativeElement; // Ok
    this.elementDynamic.nativeElement; // Ok
  }
}

<div #elementA>A</div>
<div #elementB>B</div>

Update: Starting from Angular v9.x static has a default value of false.
Read more at: https://angular.io/api/core/ViewChild#viewchild

Answer 3

何时使用{static:true}

https://angular.io/guide/static-query-migration#should-i-use-static-true

这解释得非常简单。

Angular v8 - @ViewChild 静态 true 或 false

Angular v8 - @ViewChild static true or false

angular

angular8

viewchild

"在 Angular 版本 8 中，要求所有 @ViewChild 和 @ContentChild 查询都有一个 'static' 标志，指定查询是 'static' 还是 'dynamic'."