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是已打开模式的实例。

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

1 个答案: