Угловой модальный неопределенный nativeElement

Question

Я получаю следующую ошибку при попытке закрыть мой модал:

не может прочитать свойство nativeElement из неопределенного

Элемент был визуализирован к тому времени, когда я пытаюсь закрыть его, поэтому я не уверен, что еще это может быть.

Модальный код:

<div class="modal" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <button type="button" class="btn btn-primary" (click)="close()">Close</button>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

Машинопись:

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

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

  constructor() { }

  @ViewChild('myModal') closeModal: ElementRef;

  ngOnInit() {
  }

  close() {
    this.closeModal.nativeElement.click();
  }
}

Answer 1

ViewChild использует ссылочную переменную шаблона , а не id, для ссылки на элемент. Вы должны установить переменную myModal для целевого элемента в разметке шаблона:

<div class="modal" #myModal ...>

, чтобы вы могли ссылаться на этот элемент с помощью ViewChild:

@ViewChild('myModal') closeModal: ElementRef;