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

Question

在我的应用程序中有三个组件。 1）地图 2）搜索 3）用户档案

默认情况下登录后我加载了MAP组件，然后我可以使用标题菜单链接转到任何其他屏幕。

我希望实现这样的功能，就像我在浏览器中加载地图组件时，当我从其他屏幕或后退按钮返回到地图屏幕时，它不应该再次重新加载组件。因为当我从其他屏幕返回时，它正在重新加载所有图钉和相关数据，并重置用户在地图上的最后一个视图。

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

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

附上示例截图以供参考。

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} },
];