Angular2 + routeReuseStrategy生命周期挂钩 [英] Angular2+ routeReuseStrategy lifecycle hooks

问题描述

我正在尝试利用自定义 RouteReuseStrategy 为此，我想在分离组件时暂停所有订阅，并进行诸如滚动到正确位置之类的其他操作.

I'm trying to take advantage of a custom RouteReuseStrategy and for that I'd like to suspend any subscriptions when a component is detached and other things like scrolling to the proper position.

我已经检查了可能的钩子，但是显然没有添加其他生命周期钩子，并且不会调用 OnDestroy .

I've checked for possible hooks, but apparently no additional lifecycle hooks have been added and OnDestroy isn't called.

我尝试添加自己的onDetach和onAttach挂钩，但是 ActivatedRouteSnapshots 和<一个href ="https://angular.io/api/router/DetachedRouteHandle" rel ="noreferrer"> DetachedRouteHandle 将为我提供当前组件的实例(只是原型?).

I tried to add my own onDetach and onAttach hooks, but neither the ActivatedRouteSnapshots nor the DetachedRouteHandle will give me the instance of the current component (just the prototype?).

使用 CanDeactivate Guard CanDeactivate Guard 导航时，我可以掌握组件实例的唯一方法，但这似乎不正确.而且我仍然找不到为onAttach添加钩子的方法.

The only way I could get a grip on the component instance when navigating away by using the CanDeactivate guard, but that doesn't seem right. And I still couldn't find a way to add a hook for onAttach.

所以我的问题是，如何在拆离组件时正确地挂起组件，并在连接时恢复它呢?

So my question is, how can I properly suspend a component when detached and resume it when attached ?

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

There used to be a OnActivate hook-interface in @angular/router, but that seems to be gone and I didn't see any replacement.

P.S.似乎有一些关于带有自定义RouteReuseStrategies的Angular应用程序的报告，这些应用程序在长时间使用时会变慢，这可能是因为无法暂停/恢复组件.

P.S. there seem to some reports of Angular apps with custom RouteReuseStrategies slowing down when used for extended time, probably because there is no way to pause/resume components.

推荐答案

我修复了它(是的，它是一个bug，而不是缺少的功能).

I fixed it (yes this is more a bug than a missing feature).

扩展RouterOutlet并覆盖attach()和detach()(请参见下文)，然后将<router-outlet>标记替换为<app-router-outlet>. 如果您的组件具有onDetach和/或onAttach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute)方法，它将被调用.

Extend RouterOutlet and override attach() and detach() (see below), then replace your <router-outlet> tags with <app-router-outlet>. If your component has a onDetach and/or onAttach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute) method, it will be called.

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或在ActivatedRoute中保留的data，也无法标识具有相同routeConfig/path的两个实例.

P.S. Even with that fix custom RouteReuseStrategies are still pretty useless, without access to history states or preserved data in the ActivatedRoute there is no way of identifying two instances with the same routeConfig/path.

由于对Angle调用RouteReuseStrategy，路由器导航事件和history.pushState有一些奇怪的时间安排，因此很难为此编写解决方法.

Paired with some weird timing of angular's calls to RouteReuseStrategy, Router Navigation Events and history.pushState it's extremely hard to write workarounds for that.

使用它非常令人沮丧.

这篇关于Angular2 + routeReuseStrategy生命周期挂钩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！