如何在Angular 2中关闭模态? [英] How can I close a modal in Angular 2?

问题描述

我希望用户单击提交"按钮，并且模式自动关闭.

I want user click the Submit button and the modal close automatically.

如果我在Submit <button>中添加data-dismiss="modal"，它将无法运行submitComments().

If I add data-dismiss="modal" in the Submit <button>, it won't run submitComments().

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

I tried to do something like $('#myModal').modal('hide');, but not succeed.

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

So how can I close a modal in Angular 2? Thanks

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

推荐答案

除了@MattScarpino的答案外，另一种方法是将按钮类型从submit更改为button并调用函数 submitComments()，并同时调用dismiss-modal. 这样，您就可以同时消除模态和调用函数，希望对您有所帮助. 这是示例:

Apart from the @MattScarpino's answer another alternative is just change your button type to button from submit and call your function submitComments() and at the same time call dismiss-modal. by doing so you able to dismiss modal and call function too at the same time hope this may help you. here is example:

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

更新

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

Update

if you wish to close modal from your controller side you can use using this way

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

这篇关于如何在Angular 2中关闭模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！