角度4 - 再訪時にコンポーネントを再ロードしない

Question

私のアプリケーションには3つのコンポーネントがあります。 1）地図 2）その後、私は、ヘッダーメニューのリンクを使用して、他の画面に行くことができ、デフォルトIのロードマップコンポーネントでログイン後 3）ユーザープロファイル

を検索します。

地図のコンポーネントをもう一度読み込まないでください。地図のコンポーネントをブラウザに読み込むと、別の画面や戻るボタンから地図の画面に戻ったときに機能が再開されます。他の画面から戻ってくると、すべてのプッシュピンと関連データが読み込まれ、ユーザーの最後の表示が地図上にリセットされるためです。

注 - マップコンポーネントでは、ngOnItイベントのマップをロードします。

この機能はどのように角度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

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