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-platform-node, ~2.0.11 bootstrap: ^3.3.7

Answer 1

Причиной этого является router активируется до запуска модального компонента. Для этого вы должны либо использовать ng-bootstrap, либо иметь компонент в качестве дочернего компонента родительского компонента вашего компонента.