- 首页
- 前端开发
- 如何通过在打字稿中调用函数来关闭引导程序 4 模型
如何通过在打字稿中调用函数来关闭引导程序 4 模型
[英] How to close bootstrap 4 model by calling a function in typescript
本文介绍了如何通过在打字稿中调用函数来关闭引导程序 4 模型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是引导程序 4 模态，然后是 示例
以下是模板代码:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开<div class="modal" id="myModal"><div class="modal-dialog"><div class="modal-content"><!-- 模态标题--><div class="modal-header"><h4 class="modal-title">模态标题</h4><button type="button" class="close" data-dismiss="modal">×</button>
<!-- 模态体--><div class="modal-body">模态体..
<button type="button" class="btn btn-danger" (click)="save()">保存</button>
点击open按钮，我打开对话窗口，点击save按钮，我将调用save()方法.在.ts 我在 save 方法中写了一些条件，如下所示:
save(){如果(条件){......不要关闭模态......} 别的{......关闭模态......}}
如何通过调用typescript中的save()方法关闭modal?
Stackblitz 演示
解决方案
我有另一个解决方案，没有关闭按钮的技巧.
第一步你需要通过npm命令安装jquery和bootstrap.
其次需要在组件中添加declare var $ : any;(重要步骤)
并且使用可以在onSave()方法上使用$('#myModal').modal('hide');
演示 https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts
I am using bootstrap 4 modal followed by the example
Below is the template code:
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<button type="button" class="btn btn-danger" (click)="save()">Save</button>
</div>
</div>
</div>
</div>
Here on clicking the open button i am opening dialog window,On clicking save button i will call save() method.In .ts i have written some conditions inside save method like this:
save(){
if(condition){
......don't close the modal....
} else{
......close the modal....
}
}
How can i close the modal by calling the save() method in typescript?
Stackblitz DEMO
解决方案
I have another solution without trick on close button.
First step you need install jquery and bootstrap by npm command.
Second you need add declare var $ : any; in component (important step)
And use can use $('#myModal').modal('hide'); on onSave() method
Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts
这篇关于如何通过在打字稿中调用函数来关闭引导程序 4 模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
