使用角度2中的typescript关闭bootstrap模态

时间:2016-08-20 13:34:11

标签: angular typescript

我有一个按钮,点击其中我打开一个bootstrap模式弹出窗口。模态弹出窗口包含一些带有提交按钮的字段。我想在保存数据时关闭弹出窗口。我无法使用数据解除,因为它会在用户点击按钮后立即关闭弹出窗口。有没有办法通过打字稿关闭弹出窗口?

expense.component.html

job    | start_time | end_time | status
-------|------------|----------|----------------
 A     |    8.00    |   8.30   |  processing 
 B     |    8.30    |   9.00   |  to do
 C     |    9.15    |   9.30   |  to do

3 个答案:

答案 0 :(得分:8)

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

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

答案 1 :(得分:1)

使用您的id =“ AddExpense”,您可以在打字稿中的任意位置使用以下代码关闭模式。

document.getElementById('AddExpense').click(); //您要解散模态的地方

答案 2 :(得分:-3)

我不确定你真正需要做什么,但是如果你想用打字稿关闭模态,你可以给你的html模态提供一个id,然后调用&#39; hide&#39;方法

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

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