Angular2 routeReuseStrategy生命周期钩子

发布时间：2020-12-17 07:01:05 所属栏目：安全来源：网络整理

导读：我正在尝试利用自定义 RouteReuseStrategy 为此,我想在分离组件时暂停任何订阅,以及滚动到正确位置等其他事情. 我已经检查了可能的钩子,但显然没有添加额外的lifecycle hooks并且没有调用OnDestroy. 我试图添加自己的onDetach和onAttach钩子,但ActivatedRout

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

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

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

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

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

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

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

解决方法

我修复了它(是的,这是一个错误,而不是一个缺失的功能).

扩展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仍然无用,无法访问ActivatedRoute中的历史状态或保留数据,因此无法使用相同的routeConfig / path标识两个实例.

与一些奇怪的角度调用RouteReuseStrategy,路由器导航事件和history.pushState的时间配对,为此编写变通办法非常困难.

这非常令人沮丧.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!