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

Question

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

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

Answer 1

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

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

在你的控制器中，你可以在你使用的动作之后添加这一行

this.closeAddExpenseModal.nativeElement.click();

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

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

您还需要定义 closeAddExpenseModal

@ViewChild('closeAddExpenseModal') closeAddExpenseModal: ElementRef;

Answer 2

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

document.getElementById('AddExpense').click(); // 你想在哪里关闭你的模态

Answer 3

您可以为按钮提供id 并在.ts 文件中使用getElementById 选择器和setAttribute 的'data-dismiss' 到'modal' 调用它，您可以在API 调用后设置此属性或您想添加的任何功能。

例子：

close(){document.getElementById('abc').setAttribute('data-dismiss','modal');}

Answer 4

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

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

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