Angular2 + routeReuseStrategy Lebenszyklus-Hooks

Question

Ich versuche, eine benutzerdefinierte RouteReuseStrategy nutzen und dafür würde ich gerne alle Abonnements aussetzen, wenn eine Komponente getrennt ist und andere Dinge wie Scrollen an die richtige Position.

Ich habe nach möglichen Haken gesucht, aber anscheinend wurden keine zusätzlichen lifecycle hooks hinzugefügt und OnDestroy wird nicht aufgerufen.

Ich habe versucht, meine eigenen onDetach und onAttach Haken hinzuzufügen, aber weder die ActivatedRouteSnapshots noch die DetachedRouteHandle wird mir die Instanz der aktuellen Komponente (nur der Prototyp?).

Die einzige Möglichkeit, die Komponenteninstanz zu greifen, wenn Sie mit der CanDeactivate guard weg navigieren, aber das scheint nicht richtig. Und ich konnte immer noch keinen Weg finden, einen Haken für onAttach hinzuzufügen.

Also meine Frage ist, wie kann ich eine Komponente ordnungsgemäß trennen, wenn sie getrennt und fortsetzen, wenn sie angeschlossen ist?

Früher gab es eine OnActivate Hook-Schnittstelle in @angular/router, aber das scheint weg zu sein und ich sah keinen Ersatz.

P.S. Es scheint einige Berichte von Angular-Apps mit benutzerdefinierten RouteReuseStrategies zu geben, die langsamer werden, wenn sie für längere Zeit verwendet werden, wahrscheinlich weil es keine Möglichkeit gibt, Komponenten anzuhalten/fortzusetzen.

Answer 1

Ich habe es behoben (ja das ist mehr ein Fehler als ein fehlendes Feature).

RouterOutlet erweitern und außer Kraft setzen attach() und detach() (siehe unten), dann mit <app-router-outlet> Ihre <router-outlet> Tags ersetzen. Wenn Ihre Komponente eine onDetach und/oder onAttach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute) Methode hat, wird es aufgerufen.

import {ComponentRef, Directive} from '@angular/core'; 
import {ActivatedRoute, RouterOutlet} from '@angular/router'; 

@Directive({ 
    selector: 'app-router-outlet', 
}) 
export class AppRouterOutletDirective extends RouterOutlet { 

    detach(): ComponentRef<any> { 
    const instance: any = this.component; 
    if (instance && typeof instance.onDetach === 'function') { 
     instance.onDetach(); 
    } 
    return super.detach(); 
    } 

    attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute): void { 
    super.attach(ref, activatedRoute); 
    if (ref.instance && typeof ref.instance.onAttach === 'function') { 
     ref.instance.onAttach(ref, activatedRoute); 
    } 
    } 
} 

P.S. Selbst mit dieser fixen benutzerdefinierten RouteReuseStrategies sind sie immer noch ziemlich nutzlos, ohne Zugriff auf history states oder erhalten data in der ActivatedRoute gibt es keine Möglichkeit, zwei Instanzen mit der gleichen RouteConfig/Pfad zu identifizieren.

Gepaart mit einem seltsamen Timing von angulars Aufrufe an RouteReuseStrategy, Router Navigation Events und history.pushState ist es extrem schwierig, Workarounds dafür zu schreiben.

Dies ist sehr frustrierend, mit zu arbeiten.