Angular свойство @ViewChild класса недоступно в методе класса

Question

У меня есть класс компонента Angular, и внутри метода openModal() у меня нет доступа к свойству @ViewChild content, но, как это ни странно, и, поскольку static:true, такая проблема не возникает даже внутри ngOnInit() и ngAfterViewInit(). Я сделал домашнее задание, поэтому, если я помещаю строку this.modalService.open(this.content) внутри этих обратных вызовов, все работает отлично, но если строка в openModal(), то модальное окно открывается без содержимого (конечно, я). Я уже внёс значительный вклад в изменение климата, погугляя его:

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

Как сказано в Angular документах:

stati c - True для разрешения результатов запроса перед выполнением обнаружения изменений

Дополнительно { static: true } позволяет пользователям определять время запросов ViewChild / ContentChild :

С помощью этого коммита пользователи могут диктовать, когда они хотят, чтобы конкретный запрос ViewChild или ContentChild был разрешен с флагом stati c. Например, можно пометить конкретный запрос как stati c: false, чтобы гарантировать, что обнаружение изменений всегда выполняется до установки его результатов:

@ ContentChild ('foo', {stati c: false}) foo!: ElementRef; Это означает, что даже если нет результата запроса, заключенного в * ngIf или * ngFor сейчас, добавление его в шаблон позже не изменит время разрешения запроса и потенциально нарушит ваш компонент.

Точно так же, если вы знаете, что ваш запрос должен быть разрешен раньше (например, вам нужны результаты в хуке ngOnInit), вы можете пометить его как stati c: true.

@ ViewChild (TemplateRef, {stati c: true}) foo!: TemplateRef; Примечание: это означает, что ваш компонент не будет поддерживать результаты * ngIf.

Если вы не предоставите параметр stati c при создании запроса ViewChild или ContentChild, время разрешения запроса по умолчанию наступит.

Примечание. Этот новый параметр применяется только к запросам ViewChild и ContentChild, но не к запросам ViewChildren или ContentChildren, поскольку эти типы уже разрешаются после запуска компакт-диска.