typescript 使用 angular 2 中的打字稿关闭引导模式

Close bootstrap modal using typescript in angular 2

提问by user728630

I have a button, on the click of which I am opening a bootstrap modal pop-up. The modal pop-up contains some field with a submit button. I want to close the pop-up only when I am done saving the data. I can't use data-dismiss as it will close the pop-up right after user hits the button. Is there a way to close the pop-up through typescript?

我有一个按钮，单击该按钮将打开一个引导模式弹出窗口。模态弹出窗口包含一些带有提交按钮的字段。我只想在完成保存数据后关闭弹出窗口。我不能使用 data-dismiss，因为它会在用户点击按钮后立即关闭弹出窗口。有没有办法通过打字稿关闭弹出窗口？

expense.component.html

费用.component.html

<div id="AddExpense" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add Expense</h4>
                </div>
                <div class="modal-body">
                    <form id="form" (ngSubmit)="saveExpense();">
                        <div class="form-group">
                            <table class="table table-responsive" style="border:0">
                                <tr *ngFor="#column of columnInputs" style="height:20px;">
                                    <td class="text-right" style="padding-top:10px;border:0">
                                        <h4> {{column.name | case}}: </h4>
                                    </td>
                                    <td class="text-center" style="padding-top:10px;border:0">
                                        <input *ngIf="column.name != 'status'" type="{{column.name == 'created_Date' ? 'date' : 'text'}}" name="{{columns.name}}" required [(ngModel)]="column.value" class="form-control" />
                                        <select class="form-control" *ngIf="column.name == 'status'" [(ngModel)]="column.value" name="{{column.name}}" required>
                                            <option value="status">--Select--</option>
                                            <option value="1">Paid</option>
                                            <option value="2">Unpaid</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-lg"> Add Expense </button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

回答by 3alaa baiomy

you can use the action on close button

您可以使用关闭按钮上的操作

<div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" #closeAddExpenseModal>&times;</button>
                <h4 class="modal-title">Add Expense</h4>
            </div>

and in your controller you can add this line after the action you use

在您的控制器中，您可以在您使用的操作之后添加此行

this.closeAddExpenseModal.nativeElement.click();

you will need to add this imports to your controller

您需要将此导入添加到您的控制器

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

you will need also to define closeAddExpenseModal

您还需要定义 closeAddExpenseModal

@ViewChild('closeAddExpenseModal') closeAddExpenseModal: ElementRef;

回答by Pleasure

With your id="AddExpense", you can close the modal with the below code anywhere in your typescript.

使用您的 id="AddExpense"，您可以在打字稿的任何位置使用以下代码关闭模式。

document.getElementById('AddExpense').click();// where you want to dismiss your modal

document.getElementById('AddExpense').click();// 你想关闭模态的地方

回答by Marco Castano

I'm not sure what you really need to do but If you want to close modal with typescript you can just give an id to your html modal and call 'hide' method.

我不确定你真正需要做什么，但是如果你想用打字稿关闭模态，你可以给你的 html 模态一个 id 并调用“隐藏”方法。

$('#newPostModal').modal('hide');    

Sorry if this isn't what you want maybe if you can explain me better I can help you

对不起，如果这不是你想要的也许如果你能更好地解释我我可以帮助你