Angular2 + routeReuseStrategy 수명 후크

Question

사용자 정의 RouteReuseStrategy 을 활용하려고하고 있으며 구성 요소가 분리되었을 때 구독을 일시 중지하고 적절한 위치로 스크롤하는 것과 같은 다른 작업을 일시 중지하고 싶습니다.

가능한 후크를 확인했지만 추가로 lifecycle hooks이 추가되지 않았으며 OnDestroy이 호출되지 않았습니다.

내 자신의 onDetach 및 onAttach 후크를 추가하려고했지만 ActivatedRouteSnapshots도 DetachedRouteHandle도 나에게 현재 구성 요소 (단지 프로토 타입?)의 인스턴스를 제공하지 않습니다.

CanDeactivate guard을 사용하여 탐색 할 때 구성 요소 인스턴스를 잡을 수있는 유일한 방법이지만 올바르게 보이지 않습니다. 그리고 나는 여전히 onAttach에 후크를 추가하는 방법을 찾지 못했습니다.

제 질문은 어떻게 분리되었을 때 구성 요소를 제대로 일시 중단하고 연결했을 때 다시 시작할 수 있습니까?

@angular/router에는 OnActivate 훅 인터페이스가 사용되었지만 사라진 것처럼 보였습니다. 교체가 없었습니다.

P. 장시간 사용하면 사용자 지정 RouteReuseStrategies가 느려지는 각도 앱에 대한 일부 보고서가 나타납니다. 아마 구성 요소를 일시 중지/다시 시작할 수있는 방법이 없기 때문일 수 있습니다.

Answer 1

해결되었습니다 (예, 누락 된 기능보다 버그입니다).

는 RouterOutlet을 확장하고 attach() 및 detach() (아래 참조), 다음 <app-router-outlet>로 <router-outlet> 태그를 교체보다 우선합니다. 구성 요소에 onDetach 및/또는 onAttach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute) 메서드가있는 경우이 메서드가 호출됩니다.

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. 심지어 수정 된 사용자 지정 RouteReuseStrategies는 여전히 유용하지 않고 history states에 액세스하지 않거나 ActivatedRoute에 data을 보존하면 동일한 routeConfig/path를 가진 두 개의 인스턴스를 식별 할 수 없습니다.

RouteReuseStrategy, Router Navigation Events 및 history.pushState에 대한 각도 호출의 이상한 타이밍과 쌍을 이루어 해결 방법을 쓰는 것은 매우 어렵습니다.

이 작업은 매우 실망 스럽습니다.