如何通过在TypeScript中调用函数来关闭Bootstrap 4模型

问题描述

我正在使用引导程序4模态，后跟 示例

I am using bootstrap 4 modal followed by the example

下面是模板代码:

<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">&times;</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>

在这里单击open按钮，我将打开对话框窗口；在单击save按钮，我将调用save()方法.在 .ts 中，我在save内写了一些条件像这样的方法:

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....
   }
 }

如何通过在typescript中调用save()方法来关闭modal?

How can i close the modal by calling the save() method in typescript?

Stackblitz演示

Stackblitz DEMO

推荐答案

我还有另一种解决方案，没有关闭按钮的窍门.

I have another solution without trick on close button.

第一步，需要通过npm命令安装jquery和bootstrap.

First step you need install jquery and bootstrap by npm command.

第二步，您需要在组件中添加declare var $ : any;(重要步骤)

Second you need add declare var $ : any; in component (important step)

并且可以在onSave()方法上使用$('#myModal').modal('hide');

And use can use $('#myModal').modal('hide'); on onSave() method

演示 https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

这篇关于如何通过在TypeScript中调用函数来关闭Bootstrap 4模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！