ng2-bootstrap-modal немедленно закрывается

Диалог отображается около секунды, а затем скрывается. Возможно, я мог бы использовать эту опцию «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


person Ironmantra    schedule 21.05.2017    source источник


Ответы (1)


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

person Aravind    schedule 21.05.2017
comment
Я использую ng2-bootstrap, как указано в заголовке. Ваши первые предложения помогли мне понять. Внесение следующих изменений дало мне работоспособное решение на данный момент. setTimeout(() =› { disposable.unsubscribe(); }, 333000); //какое-то очень долгое время return false; //предотвращает переход по ссылке #, фактически перезагружая страницу. Также видел упоминание для ng1.x, где дублирование ссылок на библиотеки javascript могло вызвать такое поведение, но здесь это не так. - person Ironmantra; 21.05.2017
comment
так что ты собираешься попробовать? - person Aravind; 21.05.2017