如何通过在打字稿中调用函数来关闭引导程序 4 模型

SAVE

关注

发信

关注(28)粉丝(399)

如何通过在打字稿中调用函数来关闭引导程序 4 模型

本文介绍了如何通过在打字稿中调用函数来关闭引导程序 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">&times;</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">&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>

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 模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-25 05:51