在Angular 2打字稿中获取模态元素

Question

如何使用 document.getElementById 获取模态元素？我正在尝试通过我的家庭组件打字稿文件中的代码手动显示和隐藏模式。

我已经有一个可以在按下按钮时工作的模式 - 现在我想在代码中出现某些条件时手动切换模式。

我有：

var errorModalBox = document.getElementById("errorModal");
errorModalBox.modal('show');

但是，第二行抛出以下错误：

Property 'modal' does not exist on type 'HTMLElement'.

Answer 1

正如您的错误所解释的，“HTMLElement”上不存在“modal”属性。这是因为您使用纯 JavaScript 而不是 JQuery 获取对 HTML 元素的引用。 Jquery 在引用 HTML 元素时添加了额外的方法，Bootstrap JS 向 jQuery 对象添加了额外的方法和属性；其中之一是“模态”方法。

由于您将 Typescript 与 Angular 2 一起使用，因此当您使用“$”或“jQuery”引用 jQuery 对象时，typescript 编译器会抛出错误。要修复编译错误，请将此语句添加到 Home 组件中最后一个 import 语句的下方。

declare var $:any;

然后只需将您的代码更改为：

var errorModalBox = document.getElementById("errorModal");
errorModalBox.modal('show');

收件人：

$('#errorModal').modal('show');