Angular 类 @ViewChild 属性在类方法中不可访问

Question

我有一个 Angular 组件类，在 openModal() 方法中我无法访问 @ViewChild content 属性，但很奇怪，因为 static:true 甚至在 ngOnInit() 和 @ 内部都没有这样的问题987654325@。我已经完成了功课，所以如果我将this.modalService.open(this.content) 行放在这些回调中，一切都可以正常工作，但是如果openModal() 中的行打开时没有内容（当然是ja）。我已经对气候变化做出了重大贡献：

import {AfterViewInit, Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {NgbModalConfig, NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-modal-auto-shown',
  templateUrl: './modal.component.html',
  providers: [NgbModalConfig, NgbModal]
})
export class ModalComponent implements OnInit, AfterViewInit {
  @ViewChild('content', {static: true}) private content: any;
  private test = 'test_string';

  constructor(config: NgbModalConfig, private modalService: NgbModal) {
    config.backdrop = 'static';
    config.keyboard = false;
  }

  ngOnInit(): void {
    console.log('oninit this:', this);
    console.log('oninit this.test:', this.test);
    console.log('oninit this.content:', this.content);
  }

  ngAfterViewInit() {
    console.log('afterviewinit this:', this);
    console.log('afterviewinit  this.test:', this.test);
    console.log('afterviewinit  this.content:', this.content);
  }

  openModal(that = this) {
    console.log('openmodal this:', this);
    console.log('openmodal  this.test:', this.test);
    console.log('openmodal  this.content:', this.content);
    console.log('openmodal this:', that);
    console.log('openmodal  that.test:', that.test);
    console.log('openmodal  that.content:', that.content);
    console.log('openmodal that === this:', that === this);
    this.modalService.open(this.content);
    that.modalService.open(that.content);
  }

}

我在这里转储控制台：

oninit this: ModalComponent {modalService: NgbModal, test: "test_string", content: TemplateRef_}  
oninit this.test: test_string   
oninit this.content: TemplateRef_ {_parentView: {…}, _def: {…}}  
afterviewinit this: ModalComponent {modalService: NgbModal, test: "test_string", content: TemplateRef_}  
afterviewinit this.test: test_string  
afterviewinit this.content: TemplateRef_ {_parentView: {…}, _def: {…}}  

openmodal this: ModalComponent {modalService: NgbModal, test: "test_string"}  
openmodal this.test: test_string  
openmodal this.content: undefined  
openmodal this: ModalComponent {modalService: NgbModal, test: "test_string"}  
openmodal that.test: test_string  
openmodal that.content: undefined  
openmodal that === this: true  

test 属性在之后就幸福地生活了，它可以从所有方法访问，但是，@ChildView 属性不是，这与上下文变量this 无关（？？）。引擎盖下是什么守护进程？

Answer 1

As Angular docs says:

静态 - 在更改检测运行之前解析查询结果为真

另外，{ static: true }allow users to define timing of ViewChild/ContentChild queries：

通过此提交，用户可以决定何时需要特定的 要使用静态标志解析的 ViewChild 或 ContentChild 查询。 例如，可以将特定查询标记为静态：false 到 确保更改检测始终在其结果设置之前运行：

@ContentChild('foo', {static: false}) foo !: ElementRef;这意味着 即使没有包含在 *ngIf 或 *ngFor now，稍后在模板中添加一个不会改变查询解析的时间并可能会破坏您的 组件。

同样，如果您知道您的查询需要提前解决 （例如，您需要 ngOnInit 挂钩中的结果），您可以将其标记为 静态：真。

@ViewChild(TemplateRef, {static: true}) foo !: TemplateRef;注意：这个 表示您的组件将不支持 *ngIf 结果。

如果您在创建 ViewChild 时未提供静态选项或 ContentChild 查询，默认的查询解析时间会启动。

注意：这个新选项仅适用于 ViewChild 和 ContentChild 查询，而不是 ViewChildren 或 ContentChildren 查询，因为这些类型 CD 运行后已解决。