Angular 4 - 不要在重新访问时重新加载组件

Question

我的应用程序有三个组件。 1）地图 2）搜索 3）用户资料

登录后，默认加载地图组件，然后可以使用标题菜单链接进入任何其他屏幕。

我想实现的功能是，一旦在浏览器中加载了地图组件，当我从其他屏幕返回地图屏幕或后退按钮时，不应再次重新加载该组件。因为当我从其他屏幕返回时，它会重新加载所有推钉和相关数据，并重置用户在地图上的最后视图。

注意 - 在地图组件中，我在ngOnIt事件上加载地图。

如何在Angular 2/4中实现此功能？

参考附带了示例截图。

- Pushkar Rathod

---

如果您从组件中导航离开，则该组件及其所有绑定将被销毁。如果有数据可以缓存，则将该数据放入服务中，这样当第一次加载时，它将永远不会再次加载，并且将使用缓存。 - Lansana Camara

@Lansana 感谢您的及时回复。嗯，我这里不能使用缓存，因为我需要不断从REST API获取实时数据，并在地图上显示推针，所以我不想缓存任何单个数据。唯一需要做的是在返回地图组件时，地图应该保持其之前的状态。我不想刷新地图。 - Pushkar Rathod

你正在使用的地图是否有任何配置选项来保存其状态？如果有，你应该将该逻辑添加到一个服务中，并在组件初始化时加载该保存状态，以便地图可以使用它（如果存在），否则创建一个新版本。这是你能够实现所需功能的唯一方式，因为组件本身的所有状态都将被销毁，这就是为什么你的地图总是重新创建的原因。 - Lansana Camara

看看这个更短的答案，它是采用已接受答案的变体。尝试一下，看看是否适用于您的用例，似乎有可能：https://dev59.com/G1gR5IYBdhLWcg3wftOq#44854611 - Lansana Camara

@Lansana，我从这个例子中得到了帮助。https://plnkr.co/edit/otbZBuRmGYQXeY6b4Sfp?p=preview。顺便说一句，谢谢你的建议！！ - Pushkar Rathod

Answer 1

这是我实现这个功能的方法。

首先 - 实现了RouteReuseStrategy接口。

import {RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {

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

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        //console.debug('CustomReuseStrategy:shouldDetach', route);
        return !!route.data && !!(route.data as any).shouldDetach;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        //console.debug('CustomReuseStrategy:store', route, handle);
        this.handlers[route.routeConfig.path] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        //console.debug('CustomReuseStrategy:shouldAttach', route);
        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        //console.debug('CustomReuseStrategy:retrieve', route);
        if (!route.routeConfig) { return null; }
        return this.handlers[route.routeConfig.path];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        //console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
        return future.routeConfig === curr.routeConfig;
    }

}

第二步 - 在app.module中添加了CustomReuseStrategy提供程序。

import {RouteReuseStrategy} from '@angular/router';
import {CustomReuseStrategy} from './Shared/reuse-strategy';

providers: [
{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
]

第三个 - 在 app.routing.ts 中添加了 shouldDetach 属性。

import { Routes, RouterModule } from "@angular/router";
import { MapComponent } from './components/map/map.component';

const ROUTES: Routes = [
{ path: 'maps', component: MapComponent , canActivate:[AuthGuard], data: { shouldDetach: true} },
];

- Pushkar Rathod

---

@Ashwin 我不确定这个解决方案是否可行，但你可以尝试一下这个链接：https://dev59.com/mqPia4cB1Zd3GeqPtBau - Pushkar Rathod