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 和 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 保护器导航离开时，我可以控制组件实例的唯一方法，但这似乎不对.而且我仍然找不到为 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.

附言似乎有一些报告称，自定义 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.

推荐答案

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

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

扩展 RouterOutlet 并覆盖 attach() 和 detach()(见下文)，然后替换你的 标签使用 .如果您的组件具有 onDetach 和/或 onAttach(ref: ComponentRef, activateRoute: 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);
    }
  }
}

附言即使有了这个修复，自定义 RouteReuseStrategies 仍然毫无用处，如果无法访问 history states 或保留在 ActivatedRoute 中的data，则无法识别两个具有相同路由配置/路径的实例.

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.

再加上 angular 调用 RouteReuseStrategy、Router Navigation Events 和 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.

使用这种方法非常令人沮丧.

This is extremely frustrating to work with.

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