typescript - Javascript removeEventListener OnDestroy fungerer ikke i Angular 6

Jeg prøver å removeEventListener i min Angular-komponent: Javascript removeEventListener fungerer ikke

    ...
    ngOnInit() {
        document.addEventListener('visibilitychange', () =>this.handleVisibleState(), true);
    }

    ngOnDestroy() {
        document.removeEventListener('visibilitychange', () => this.handleVisibleState(), true);
    }

    handleVisibleState() {
        let vis = document.visibilityState === 'visible';
        this.configsService.update_collab_visible(vis);
    }
    ...

med den ovennevnte addEventListener fungerer selv etter ngOnDestroy()

Hvordan kan jeg koble fra visibilityState fra dokumentet i Angular-komponenter?

forsøk 2

    private visibilityChangeCallback: () => void;

    ngOnInit() {
        this.visibilityChangeCallback = () => this.handleVisibleState();
        document.addEventListener('visibilitychange', this.handleVisibleState, true);
    }

    ngOnDestroy() {
        document.removeEventListener('visibilitychange', this.handleVisibleState, true);
    }

    handleVisibleState() {
        let vis = document.visibilityState === 'visible';
        console.log(typeof this.configsService); // undefined
        this.configsService.update_collab_visible(vis);
    }

resultat :

FEIL TypeError: Kan ikke lese egenskapen 'update_collab_visible' av undefined

Svar #1

Lagre tilbakeringingen:

private visibilityChangeCallback: () => void;

ngOnInit() {
    this.visibilityChangeCallback = () => this.handleVisibleState();
    document.addEventListener('visibilitychange', this.visibilityChangeCallback, true);
}

ngOnDestroy() {
    document.removeEventListener('visibilitychange', this.visibilityChangeCallback, true);
}

Svar #2

Å kalle removeEventListener() med argumenter som ikke identifiserer noen for øyeblikket registrert EventListener på EventTarget har ingen effekt. Du sender en annen funksjon til det.

Å bruke instansekupé-funksjon bør hjelpe i ditt tilfelle:

ngOnInit() {
    document.addEventListener('visibilitychange', this.handleVisibleState, true);
}

ngOnDestroy() {
    document.removeEventListener('visibilitychange', this.handleVisibleState, true);
}

handleVisibleState = () => {
    let vis = document.visibilityState === 'visible';
    this.configsService.update_collab_visible(vis);
}

Relaterte artikler