Angular v8 - @ViewChild 静态真或假答案

【问题标题】：Angular v8 - @ViewChild static true or falseAngular v8 - @ViewChild 静态真或假
【发布时间】：2019-11-18 23:45:04
【问题描述】：

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

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

“在 Angular 版本 8 中，要求所有 @ViewChild 和 @ContentChild 查询都有一个‘静态’标志，指定查询是‘静态’还是‘动态’。”

它还指出，在大多数情况下，只需设置 { static: false } 就可以解决问题。

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

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

【问题讨论】：

标签： angular angular8 viewchild

【解决方案1】：

当您想访问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>

更新：从 Angular v9.x 开始，静态的默认值为 false。
阅读更多：https://angular.io/api/core/ViewChild#viewchild

【讨论】：

我想更正@ContentChild 的情况，非静态在ngAfterContentInit 中可用
旧的@ViewChild 比新的@ViewChild 有什么缺点？我觉得上一个比今天的更新更有帮助

【解决方案2】：

来自文档：

如何选择使用哪个静态标志值：真还是假？

在官方 API 文档，我们一直建议检索查询结果在 ngAfterViewInit 中用于查看查询，在 ngAfterContentInit 中用于内容查询。这是因为当这些生命周期钩子运行时，改变相关节点检测已完成，我们可以保证我们已经收集了所有可能的查询结果。

大多数应用程序都希望使用 {static: false} 原因。此设置将确保查询匹配依赖于绑定分辨率（例如 *ngIfs 或 *ngFors 中的结果）将是由查询找到。

在少数情况下可能需要 {static: true} 标志（请参阅此处的答案）。

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

【讨论】：

谢谢，但请您写一个答案，并附上解释。而不仅仅是复制粘贴文档的一部分。

【解决方案3】：

何时使用{static:true}

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

这用非常简单的术语解释。

【讨论】：