angular - 使用路由重用管理订阅

Question

假设我有一个组件，订阅发生在 onInit 中，取消订阅发生在 onDestroy 中。

ngOnInit(){
  // subscribe
}

ngOnDestroy() {
  // unsubscribe
}

但现在我切换到自定义路由重用策略，组件将被重用。我的问题是如何管理这些订阅，以便在导航回组件的路由时不会调用 onInit onDestroy。

关于如何在用户离开路线(组件)时取消订阅并在导航回路线(组件)时订阅？

Angular 4.1.1 Angular -cli 1.0.1

希望我说得足够简单明了。

Answer 1

我找到了解决方案。您可以使用 RouteReuseStrategy store 方法来实现自定义附加/分离组件生命周期 Hook 。

如果 ActivatedRouteSnapshot 附加，store 方法接收 null 作为 detachedRouteHandle (null = attached, value =分离)。

我使用组件作为路由键和服务来存储DetachedRouteHandles。

RouteReuseStrategy代码:

export class SelectiveRouteReuseStrategy implements RouteReuseStrategy {

    constructor(
        private detachedRouteHandlesService: DetachedRouteHandlesService,
    ) { }

    public shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return !!route.data.reuse;
    }

    public store(route: ActivatedRouteSnapshot, detachedRouteHandle: DetachedRouteHandle): void {
        detachedRouteHandle
            ? this.detachedRouteHandlesService.set(route.component, detachedRouteHandle)
            : this.detachedRouteHandlesService.delete(route.component);
    }

    public shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!route.data.reuse ? this.detachedRouteHandlesService.has(route.component) : false;
    }

    public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
        return !!route.data.reuse ? this.detachedRouteHandlesService.get(route.component) : null;
    }

    public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig;
    }

}

---

DetachedRouteHandlesService 具有 store 属性 - Map 以组件为键，以 DetachedRouteHandle 为值；和 changes 属性 - Observable 在商店更改时发出商店。

DetachedRouteHandlesService 代码:

export class DetachedRouteHandlesService {

    private readonly store: Map<any, DetachedRouteHandle>;

    private readonly changes: Subject<Map<any, DetachedRouteHandle>>; 
    public readonly changes$: Observable<Map<any, DetachedRouteHandle>>;

    constructor() {
        this.store = new Map();

        this.changes = new Subject();
        this.changes$ = this.changes.asObservable();
    }

    private next(): void {
        this.changes.next(this.store);
    }

    public set(component: any, handle: DetachedRouteHandle): void {
        this.store.set(component, handle);
        this.next();
    }

    public delete(component: any): void {
        this.store.delete(component);
        this.next();
    }

    public get(component: any): DetachedRouteHandle | null {
        return this.store.get(component);
    }

    public has(component: any): boolean {
        return this.store.has(component);
    }

    public clear(): void {
        this.store.clear();
        this.next();
    }
}

---

在组件中，只需订阅更改并检查 DetachedRouteHandle。 handle = detached，else = attached。

组件代码:

ngOnInit() {

  this.detachedRouteHandlesService.changes$
    .pipe(
      observeOn(asapScheduler)
    ).subscribe(changes => {
      changes.has(this.activatedRoute.component)
        ? this.onDetach()
        : this.onAttach()
  });

}