Angular2 + routeReuseStrategy生命周期钩子

Question

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

我已经检查了可能的钩子,但显然没有添加额外的生命周期钩子并且没有调用OnDestroy.

我试图添加自己的onDetach和onAttach挂钩,但无论是ActivatedRouteSnapshots也不DetachedRouteHandle会给我当前组件实例(只是原型？).

通过使用CanDeactivate后卫导航时,我可以抓住组件实例的唯一方法,但这似乎不对.我仍然找不到为onAttach添加钩子的方法.

所以我的问题是,如何在分离时正确暂停组件并在连接时恢复它？

曾经有一个OnActivate钩子接口@angular/router,但似乎已经消失,我没有看到任何替代品.

PS似乎有一些关于使用自定义RouteReuseStrategies的Angular应用程序在长时间使用时放慢速度的报告,可能是因为没有办法暂停/恢复组件.

Answer 1

我已修复它（是的，这不是缺陷，而是缺少的功能）。

扩展RouterOutlet并覆盖attach()和detach()（请参见下文），然后将<router-outlet>标记替换为<app-router-outlet>。如果您的组件具有onDetachand / or 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);
    }
  }
}

PS即使使用了此修复程序，自定义RouteReuseStrategies仍然非常无用，无法访问history states或保留data在其中ActivatedRoute，无法用相同的routeConfig / path标识两个实例。

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

使用它非常令人沮丧。