Angular 2+ 中的 Angular 粘性状态答案

【问题标题】：Angular Sticky States in Angular 2+Angular 2+ 中的 Angular 粘性状态
【发布时间】：2017-08-25 09:45:31
【问题描述】：

我正在将 Angular 1.5.X 应用程序迁移到 Angular 4。在我的应用程序中，我使用 Angular Ui-Router Sticky State https://github.com/ui-router/sticky-states 在我的应用程序的某些视图中进行导航时避免丢失视图的内容，但是当我尝试在 ng-router2 中使用此功能时，我找不到它。 https://ui-router.github.io/ng2/tutorial/helloworld.

有些人知道一些路由器与Angular2+中的Sticky State功能相似，或者使用ui-router-ng2来模拟Sticky State。

【问题讨论】：

我有同样的问题 - 一个带有子（标签）的父组件，这些子视图可以包含各种 iframe/对象，我希望避免每次用户在子之间切换时重新加载。

标签： javascript angularjs angular angular-ui-router angular2-routing

【解决方案1】：

我在互联网上找到了这个答案，我不记得网络，但解决方案不是我的。

import { Injectable } from '@angular/core';

import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, RouteReuseStrategy, DetachedRouteHandle, Route} from '@angular/router';

@Injectable()
export class ArchReuseStrategyService implements RouteReuseStrategy {

    handlers: {[key: string]: DetachedRouteHandle} = {};

     /** Determine if should detach the route */
    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.log('CustomReuseStrategy:shouldDetach', route);
        return (route.routeConfig.sticky === true) ? true : false;
        // Or return true; 
    }
    /** Store the route */
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.log('CustomReuseStrategy:store', route, handle);
        this.handlers[route.routeConfig.path] = handle;
    }
    /** Determina si la ruta y su subrutas deberian poder ser recuperadas */
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.log('CustomReuseStrategy:shouldAttach', route);
        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
    }
    /** Recover a store route*/
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.log('CustomReuseStrategy:retrieve', route);
        if (!route.routeConfig) return null;
        return this.handlers[route.routeConfig.path];
    }
    /** Determine if the route should be reused*/
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        console.log('CustomReuseStrategy:shouldReuseRoute', future, curr);
        return future.routeConfig === curr.routeConfig;
    }
}

【讨论】：