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

Question

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

登录后默认加载 MAP 组件，然后我可以使用 header 菜单进入任何其他屏幕 link。

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

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

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

附上示例截图以供参考。

Answer 1

我就是这样实现的。

First - 实现了 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;
    }

}

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

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

Angular 4 - Do not reload component on revisit

bing-maps

typescript

angular