Question

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

我已检查过可能的钩子，但显然没有添加额外的lifecycle hooks而且未调用OnDestroy。

我尝试添加自己的onDetach和onAttach钩子，但ActivatedRouteSnapshots和DetachedRouteHandle都不会给我当前组件的实例（只是原型？）。

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

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

在OnActivate中曾经有一个@angular/router钩子界面，但这似乎已经消失了，我没有看到任何替代品。

P.S。似乎有一些关于使用自定义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);
    }
  }
}

P.S。即使使用该修复程序，自定义RouteReuseStrategies仍然没用，在history states中无法访问data或保留ActivatedRoute，无法识别具有相同routeConfig / path的两个实例。

对于对RouteReuseStrategy，路由器导航事件和history.pushState的角度调用的一些奇怪时机，很难为此编写变通方法。

使用它非常令人沮丧。

Angular2 + routeReuseStrategy生命周期钩子

1 个答案: