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使用template reference variable而不是id来引用元素。您应该在模板标记中的目标元素上设置变量myModal：

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

，以便您可以使用ViewChild来引用该元素：

@ViewChild('myModal') closeModal: ElementRef;

角模态未定义nativeElement

1 个答案: