组件html

Question

我希望用户点击“提交”按钮，模式会自动关闭。

如果我在提交data-dismiss="modal"中添加<button>，则无法运行submitComments()。

我试图做$('#myModal').modal('hide');之类的事情，但没有成功。

那么如何在Angular 2中关闭模态？感谢

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form (ngSubmit)="submitComments()">
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

submitComments() {
    // I want to do something like $('#myModal').modal('hide'); here.
}

Answer 1

你可以通过简单地在Angular2控制器中声明任何类型的jQuery变量来实现。

declare var jQuery:any;

在import语句之后和组件装饰器之前添加它。

然后使用它的id来访问bootstrap模式。

jQuery("#myModal").modal("hide");

Answer 2

使用@ViewChild

使用#closeBtn

将data-dismiss="modal"添加到元素

<a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>

组件html

<div class="modal fade" id="yourModalId">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

使用this.closeBtn.nativeElement.click();触发点击事件将关闭您的模式。

组件打字稿

import {ViewChild, ElementRef} from '@angular/core';
@Component({
    moduleId: ...,
    selector: '.',
    templateUrl: '.',
    styleUrls: ['.']
})
export class yourClass {
    @ViewChild('closeBtn') closeBtn: ElementRef;

    yourFunction() {
        //do something
        ...
        ...
        //close your modal
        this.closeModal();
    }

    //call this wherever you want to close modal
    private closeModal(): void {
        this.closeBtn.nativeElement.click();
    }
}

Answer 3

除了@ MattScarpino的回答之外，另一个选择是将您的按钮类型从button更改为submit并调用您的函数 submitComments()并同时致电dismiss-modal。通过这样做，你可以同时解雇模态和调用功能希望这可以帮助你。这是例子：

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" (click)='submitComments()' data-dismiss="myModal" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

更新

如果您希望从控制器端关闭模态，可以使用这种方式

$("#myModal").modal("hide");

Answer 4

首先，将div的hidden属性设置为等于变量：

<div id="myModal" [hidden]="hideModal" class="modal fade">

其次，在类中，定义一个名为hideModal的布尔值并将其设置为false：

hideModal: boolean = false;

第三，在submitComments()中，将hideModal设为true。

Answer 5

这个宇宙中的完美答案.........................

步骤1：为模态

的解雇按钮提供唯一ID

第2步：成功提交表单或完成任务调用后

document.getElementById("addProductCloseButton").click();

你班上的

Answer 6

尽量不要在模态正文中包含表单，而是在页脚部分添加两个按钮。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
    <label class="form-control-label col-sm-2">Comments:</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="3"></textarea>
                    </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
            <button type="submit" class="btn btn-primary" >Save changes</button>
          </div>
        </div>
      </div>
    </div>

Answer 7

我这样做了，它对我很有用。

var element = document.getElementById("CloseButton") as any;

element.click();

我的CloseButton是自举关闭按钮。

Answer 8

我使用其中一个答案，并对其进行一些编辑，对我来说非常完美，我希望它可以帮助您尝试将“ yourmodal”更改为您的目标模式名称您应该使用按钮代替i

<button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button>

组件html

<div style="margin-top: 0px !important;">
    <button type="button" id="openModal" #openModal class="btn btn-fab-mini btn-outline-primary" style="float:right" (click)="yourModal.open()"><strong>click here to open modal</strong></button>
    <modal #yourModal>
      <ng-template #modalHeader>
       <button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button>
      </ng-template>
      <ng-template #modalBody>
        <yourmodalSelectorname></yourmodalSelectorname>
      </ng-template>
      <ng-template #modalFooter></ng-template>
    </modal>
  </div>

TypeScript

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

@Component({
moduleId: ...,
selector: '.',
templateUrl: '.',
styleUrls: ['.']})



yourFunction() {
    //do something
    ...
    ...
    //close your modal
    this.closeModal();
}

//call this wherever you want to close modal
private closeModal(): void {
    this.closeBtn.nativeElement.click();
}

Answer 9

我有一个更好的解决方案。当您打开模态时，保存模态参考：

this.modalRef = this.modalService.open()

，然后当您需要简单地关闭模式时：

this.modalRef.close()

Answer 10

这是关闭角度弹出窗口的简单步骤在component.ts文件中，包括以下行

 import '../../../assets/js/custom.js';
 declare var closepopup:any;

自定义文件路径取决于您的目录结构

在自定义文件中包含此功能

 function closepopup()
 {
  $(".modal").modal('hide');
 }

在此之后，如果您对表单验证事件表单数据有条件，那么您想关闭弹出模式然后添加此行

closepopup（）;

如果您仍然遇到问题，请告诉我我会在您身边

Answer 11

只需在关闭按钮中声明一个id =“ close_model”，然后将此代码放在您要关闭模型的函数中即可：:

window.document.getElementById（“ close_model”）。click（）;

如何关闭Angular 2中的模态？

11 个答案:

组件html

组件打字稿

更新

组件html

TypeScript