Javascript Can';t在TS脚本中导入引导库
我遇到了一个问题,似乎无法在我的typescript文件中导入Javascript Can';t在TS脚本中导入引导库,javascript,twitter-bootstrap,typescript,Javascript,Twitter Bootstrap,Typescript,我遇到了一个问题,似乎无法在我的typescript文件中导入bootstrapjs。我需要这个来打开一个模式 我的打字稿: import $ from 'jquery'; import 'bootstrap'; $('#btn').click(function () { $('#test').text('sasasa'); }); 我的看法 <button type="button" class="btn btn-info btn-lg" data-toggle="modal
bootstrap
js。我需要这个来打开一个模式
我的打字稿:
import $ from 'jquery';
import 'bootstrap';
$('#btn').click(function () {
$('#test').text('sasasa');
});
我的看法
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
test
</h3>
</div>
<div class="panel-body">
<span id="test">Test</span>
<button id="btn">Klik</button>
</div>
</div>
</div>
@section scripts {
<environment names="Development">
<script src="~/js/quotation-test.js"></script>
</environment>
<environment names="Staging,Production">
<script src="~/js/quotation-test.js" asp-append-version="true"></script>
</environment>
}
但是,当我删除import'bootstrap'
行时,btn
click处理程序工作正常。因此,jQuery的导入似乎是正确的
手动添加脚本(即:)
有人有什么建议吗?任何帮助都将不胜感激。mb引导使用“JQuery”,而不是“$”。尝试“导入'jquery';”或“导入{jquery}'jquery';”当使用ES6/CommonJS导入jquery时,它不会创建引导程序包所依赖的全局变量。您需要显式创建全局
jQuery
变量,以便引导程序可以使用它:
import $ from 'jquery';
window['jQuery'] = $;
import 'bootstrap';
这对我来说不太管用(得到了一个关于
窗口没有索引签名的TypeScript错误),但是你的回答引导我朝着正确的方向前进,我找到了这个解决方案:这很管用。非常感谢。
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
"@types/bootstrap": "^3.3.36",
"bootstrap": "^3.3.7",
"jquery": "^3.2.1",
import $ from 'jquery';
window['jQuery'] = $;
import 'bootstrap';