Angular2+ routeReuseStrategy 生命周期钩子(Hook)

Question

我正在尝试利用自定义 RouteReuseStrategy为此，我想在组件分离时暂停任何订阅，以及滚动到正确位置等其他事情。

我检查了可能的钩子(Hook)，但显然没有额外的 lifecycle hooks已添加和OnDestroy没有被调用。

我尝试添加自己的 onDetach 和 onAttach Hook ，但 ActivatedRouteSnapshots 都没有也不是 DetachedRouteHandle将给我当前组件的实例(只是原型(prototype)？)。

在导航离开时，我可以通过使用 CanDeactivate guard 来掌握组件实例的唯一方法。 ，但这似乎不对。而且我仍然找不到为 onAttach 添加 Hook 的方法。

所以我的问题是，如何在分离时正确挂起组件并在附加时恢复它？

@angular/router 中曾经有一个OnActivate 钩子(Hook)接口(interface)，但它似乎消失了，我没有看到任何替代品。

附言似乎有一些报告称，使用自定义 RouteReuseStrategies 的 Angular 应用程序在长时间使用时速度变慢，可能是因为无法暂停/恢复组件。

Answer 1

我修复了它(是的，与其说是缺失的功能，不如说这是一个错误)。

扩展 RouterOutlet 并覆盖 attach()和 detach() (见下文)，然后替换你的 <router-outlet>带有 <app-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);
    }
  }
}

附言即使有了这个修复，自定义 RouteReuseStrategies 仍然毫无用处，无法访问 history states或保留 data在ActivatedRoute无法识别具有相同 routeConfig/path 的两个实例。

加上 Angular 对 RouteReuseStrategy、路由器导航事件和 history.pushState 的一些奇怪的调用时间，很难为此编写解决方法。

处理起来非常令人沮丧。