如何关闭Angular 2中的模态？

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");