如何用@ngbootstrap清除angular2中的模態實例？

Question

我無法清除多次打開的模態實例。

當我第一次啓動組件工作正常單模態。當我導航回來並進入相同的組件。因爲它打開兩個模式。如何在離開組件之前清除模態？

component.html：

<ng-template #timeoutPopupAlert let-c="close"> 
     <div class=" modal-body modal-dialog modal-lg"> 
      <p>Your session will timeout. Do you need more time?</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="closeTimeoutPopup();">Ok</button> 
     </div> 
    </ng-template> 

component.ts：

 import { 
     Component, 
     OnInit, 
     ViewChild, 
     EventEmitter, 
     ElementRef, 
     ChangeDetectorRef, 
     ViewContainerRef 
    } from '@angular/core'; 
    import { 
     Observable 
    } from 'rxjs/Rx'; 
    import { 
     Router, 
     ActivatedRoute, 
     Params 
    } from '@angular/router'; 


    import { 
     Idle, 
     DEFAULT_INTERRUPTSOURCES 
    } from '@ng-idle/core'; 
    import { 
     Keepalive 
    } from '@ng-idle/keepalive'; 
    import { 
     NgbModal, 
     ModalDismissReasons, 
     NgbActiveModal 
    } from '@ng-bootstrap/ng-bootstrap'; 

    declare 
    var $; 

    @Component({ 
     selector: 'app-types', 
     templateUrl: './component.html' 
    }) 

    /** 
    * This class handles different types of verifications 
    */ 
    export class VerificationTypesComponent implements OnInit { 
     //system idle parameters 
     idleState = 'Not started.'; 
     timedOut = false; 
     lastPing ? : Date = null; 



     isVisible: boolean = true; 
     releases: IdVerificationModel; 
     verificationProcessModel: VerificationProcessModel; 
     message: any; 
     subscription; 

     private totalMinutes: number = 0.15; 
     private totalSeconds: number = 0; 
     private verificationRequestId: string; 
     public verificationRequestBy: string; 
     public verificationRequestOn: string; 

     private verificationData: any; 
     modalEl = null; 
     //Overall Verification Status based on Verification types Status 
     public overallVerifcationStatus: string; 

     @ViewChild('timer') timer; 

     // @ViewChild('timeoutPopup') timeoutPopup; 
     @ViewChild('timeoutPopupAlert') timeoutPopup; 

     public modalInstance: any; 
     public isPopupTimeout: boolean = false; 
     public modalOptions = {}; 


     constructor(private _rootNode: ElementRef, public activeModal: NgbActiveModal, private router: Router, private route: ActivatedRoute, public verificationService: VerificationService, private messageService: MessageService, private idle: Idle, private keepalive: Keepalive, private modalService: NgbModal, private cdr: ChangeDetectorRef) { 
      this.totalSeconds = this.totalMinutes * 60; 


      this.modalOptions = { 
       backdrop: 'static', 
       keyboard: true 
      }; 

      // sets an idle timeout of 5 seconds, for testing purposes. 
      idle.setIdle(1); 
      // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out. 
      idle.setTimeout(7); 
      // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document 
      idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); 

      idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.'); 
      idle.onTimeout.subscribe(() => { 
       this.idleState = 'Timed out!'; 
       this.timedOut = true; 
       if (this.activeModal) { 
        console.log(" this.activeModal" + this.activeModal); 
        this.activeModal.close(); 
       } 
       this.openTimeoutPopup(this.timeoutPopup, this.modalOptions); 

      }); 
      idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!'); 
      idle.onTimeoutWarning.subscribe((countdown) => { 
       this.idleState = 'You will time out in ' + countdown + ' seconds!'; 

      }); 

      // sets the ping interval to 15 seconds 
      keepalive.interval(15); 

      keepalive.onPing.subscribe(() => this.lastPing = new Date()); 

      this.reset(); 
     } 

     public reset() { 
      this.idle.watch(); 
      this.idleState = 'Started.'; 
      this.timedOut = false; 
     } 

     ngAfterViewInit() { 
      // this.modalEl = $(this._rootNode.nativeElement).find('div ng-template'); 
     } 

     ngAfterViewChecked() { 
      this.cdr.detectChanges(); 
     } 

     public closeTimeoutPopup() { 
      this.start_count = 0; 
      clearTimeout(this.setTimeoutFunction); 
      this.activeModal.close(); 
      this.reset(); 
     } 

     start_count = 0; 
     public openTimeoutPopup(content, options) { 
      this.activeModal = this.modalService.open(content, options); 
      this.start_count += 1; 
      if (this.start_count == 1) { 
       this.setTimeoutFunction = setTimeout(() => { 
        this.timeoutPopup = ''; 
        this.activeModal.close(); 
        // this.modalEl.modal('hide'); 
        this.router.navigate(['/tobeverified']); 
       }, 5000); 
      } 
     } 



     ngOnInit() { 

     } 
    } 

請讓我知道了一些建議或想法。

謝謝。

Answer 1

export class VerificationTypesComponent implements OnInit,OnDestroy {  
    ngOnDestroy() { 
     this.activeModal.close(); 
    } 
} 

activeModal是打開的模態的實例。