ng2-bootstrap-modal이 즉시 닫힙니다.

Question

대화 상자가 약 1 초 동안 표시된 다음 숨 깁니다. 아마도이 옵션 "autoCloseTimeout"을 사용하여 제한 시간을 1 ~ 2 분으로 설정할 수 있었지만이 문제에 대한 더 깨끗한 해결책이 있기를 바라고 있습니다. 나는 팝업이 초점을 잃고 있기 때문에 이것이 발생했다는 한 가지 의견을 보았다. 나는 팝업에 텍스트 박스를 놓고 그것을 즉시 클릭함으로써 이것을 배제했다.

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(); 
    } 
} 

나는 다음과 같은 버전을 사용하고 있습니다 :

여기 여기 타이프 스크립트 구성 요소

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 구성 요소 소스의의 방법이다 html로

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

의 각도 2.4.5, 각도 2 플랫폼 -node, ~ 2.0.11 부트 스트랩 :^3.3.7

Answer 1

이유는 router이 모달 구성 요소가 시작되기 전에 활성화됩니다. 이 경우 ng-bootstrap을 사용하거나 구성 요소 상위 구성 요소의 하위 구성 요소를 사용해야합니다.