如何使用 @ngbootstrap 清除 angular2 中的模态实例

Question

我无法清除模态实例，因为它多次打开。

当我第一次启动组件时，单个模态工作正常。 当我导航回来并进入同一组件时。因为它正在打开两种模式。如何在离开组件之前清除模态？

组件.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>

组件.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 是打开的模态的实例。