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

Question

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

我已经有一个工作模式，在按下按钮时工作 - 现在我想在代码中出现某些情况时手动切换模式。

我：

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

然而，第二行引发以下错误：

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

Answer 1

由于您的错误解释的那样，“莫代尔”属性不上“HTML元素”的存在。这是因为您正在使用纯JavaScript而不是JQuery获取对HTML元素的引用。 Jquery在引用HTML元素时增加了额外的方法，Bootstrap JS为jQuery对象添加了额外的方法和属性;其中之一是“模态”方法。

由于您正在使用Typescript和Angular 2，当您使用“$”或“jQuery”引用jQuery对象时，typescript编译器会引发错误。要修复编译错误，请在您的Home组件的最后一个import语句下添加此语句。

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

要：

declare var $:any; 

然后，只需从改变你的代码

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