ng2-bootstrap-modal 立即关闭

Question

对话框显示大约一秒钟然后隐藏。也许我可以使用此选项 "autoCloseTimeout" 将超时设置为一两分钟作为解决方法，但我希望有一个更清晰的解决方案来解决此问题。我看到一条评论说这是因为弹出窗口失去焦点。我通过在弹出窗口上放置一个文本框并立即单击它来排除这种情况。

这是html

<span>
  <a href="#" title="Delete" class="myItem" 
     (click)="showConfirm(item.id)">
     <span class='glyphicon glyphicon-trash toolbarItem'></span> 
  </a>
</span>

这是 Typescript 组件中的方法

showConfirm(blkId: string) {
    let disposable = this.dialogService.addDialog(ConfirmComponent, {
        title: 'Confirm title',
        message: 'Confirm message'
    })
        .subscribe((isConfirmed) => {
            //We get dialog result
            if (isConfirmed) {
                alert('accepted');
            }
            else {
                alert('declined');
            }
        });
    //We can close dialog calling disposable.unsubscribe();
    //If dialog was not closed manually close it by timeout
    setTimeout(() => {
        disposable.unsubscribe();
    }, 4000);  //changign this value has no affect
}

这是 ConfirmDialog 组件源代码：

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
export interface ConfirmModel {
    title: string;
    message: string;
}
@Component({
    selector: 'confirm',
    template: `<div class="modal-dialog">
                <div class="modal-content">
                   <div class="modal-header">
                     <button type="button" class="close" (click)="close()" >&times;</button>
                     <h4 class="modal-title">{{title || 'Confirm'}}</h4>
                   </div>
                   <div class="modal-body">
                     <p>{{message || 'Are you sure?'}}</p>
                   </div>
                   <div class="modal-footer">
                     <button type="button" class="btn btn-primary" (click)="confirm()">OK</button>
                     <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
                   </div>
                 </div>
              </div>`
})
export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
    title: string;
    message: string;
    constructor(dialogService: DialogService) {
        super(dialogService);
    }
    confirm() {
        // we set dialog result as true on click on confirm button, 
        // then we can get dialog result from caller code 
        this.result = true;
        this.close();
    }
}

我使用的是以下版本： angular 2.4.5, angular2-平台节点，~2.0.11 bootstrap: ^3.3.7

Answer 1

原因是 router 在模态组件启动之前被激活。您应该为此使用 ng-bootstrap 或将该组件作为组件父组件的子组件

ng2-bootstrap-modal 立即关闭

ng2-bootstrap-modal closes immediately

twitter-bootstrap-3

ng2-bootstrap

angular