如何通过调用打字稿中的函数来关闭bootstrap 4模型

Question

我正在使用 bootstrap 4 模式，然后是示例

下面是模板代码：

<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如下所示：

 save(){
  if(condition){
    ......don't close the modal....
  } else{
   ......close the modal....
   }
 }

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

堆栈闪电战演示

Answer 1

在 Angular/Typescript 中执行此操作的正确方法是使用ViewChild。

首次导入ViewChild：

import { ViewChild } from '@angular/core';

使用您选择的选择器在您的组件中添加此行：

@ViewChild('myModalClose') modalClose;

在您的 html 中添加标签myModalClose（这里我们的目标是关闭按钮）：

<!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" #myModalClose class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
  ...

在你的save()方法中：

this.modalClose.nativeElement.click();

工作堆栈闪电战