在Angular 2中使用TypeScript关闭Bootstrap模态框

Question

在Angular 2中使用TypeScript关闭Bootstrap模态框

12

我有一个按钮，点击它会打开一个Bootstrap模态弹出框。模态弹出框中包含一些字段和一个提交按钮。我想在保存数据完成后才关闭弹出窗口，但不能使用"data-dismiss"，因为它会在用户点击按钮后立即关闭弹出窗口。有没有办法通过TypeScript关闭弹出窗口？

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>

- user728630

我认为你最好使用Angular2实现模态框。看一下这个链接：https://github.com/pleerock/ng2-modal - j2L4e

可能是重复的问题：ng2-bootstrap如何将模态框作为子组件来显示/隐藏。 - Aravind

4个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

1

通过id="AddExpense"，您可以在typescript中任何位置使用以下代码关闭模态框。

document.getElementById('AddExpense').click(); // 在您想要关闭模态框的地方

- Pleasure

0

您可以为按钮提供一个id，并在.ts文件中使用getElementById选择器调用它，并使用'data-dismiss'的setAttribute设置为'modal'，您可以在API调用或其他功能之后设置此属性。

例如：

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

- TANISHQ CHOPRA

-3

我不确定你真正需要做什么，但如果你想用TypeScript关闭模态框，你可以给你的HTML模态框一个ID，并调用“hide”方法。

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

抱歉，如果这不是您想要的，也许如果您能更好地向我解释，我可以帮助您

- Marco Castano

TypeScript 不认识 $ 符号。 - user728630

2

只需导入“declare var $：any;” - Marco Castano

$ 是 jQuery 选择器。它不能像普通变量在 TypeScript 中声明。即使我这样做，它也不会具有与 jQuery $ 相同的指针功能。 - user728630

你可以在Angular 2中导入jQuery并使用所有函数... https://dev59.com/AV0a5IYBdhLWcg3wLWGx - Marco Castano

这段代码可以隐藏模态框，但无法改变模态框出现时背景的深色。 - Waseem Ahmad Naeem

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- 3alaa baiomy · Accepted Answer

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

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