jquery - 如何在 Angular 中使用 jQuery hide boostrap4 Modal?
问题描述
我将 jquery, bootstrap 添加到包中。JQuery 工作正常,但模态功能不起作用。
ts&html
import $ from 'jquery';
export class AppComponent {
name = 'Angular 5';
closeModal() {
$("#exampleModal").modal('toggle');
}
}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" (click)="closeModal()">Save changes</button>
</div>
</div>
</div>
</div>
错误
TypeError: jquery_1.default(...).modal is not a function
现场演示
解决方案
要在 Typescript 中使用 jQuery,你必须这样做。该行必须放在所有导入之后。
//import $ from 'jquery';
declare var $:any;
export class AppComponent {
name = 'Angular 5';
closeModal() {
$("#exampleModal").modal('toggle');
}
}
推荐阅读
- r - 绘制具有多列的 R 表的结果
- assembly - 装配数据部分
- python - 使用python中的请求模块POST / PUT方法将大文件拆分为小文件并将其发送到github的最佳方法是什么?
- python - 在熊猫中将一列日期时间和字符串转换为句点
- java - 在列表中排列数据
- php - php curl:Rest API Post XML
- swift - 为什么响应总是 {"detail":"Unsupported media type \"text/plain\" in request."} 在 swift 中?
- android - 在 Android Studio 中启动新项目
- php - get_bloginfo() 不在页脚上回显 - Wordpress
- android - 不遵守 Google Play 开发者计划政策