angular4 custom RouteReuseStrategy

메뉴(주소)를 이동해도 이전 component 내용이 유지되도록 하기 위해서

(기본은 새로 생성됨. ngOnInit, constructor 호출됨)

RouteReuseStrategy 커스트 마이징 후 app.module.ts 에 장착하면 되는데.. 적용이 쉽지 않은듯

일단, 구현한것 까지 기록함.

custom-reuse-strategy.ts

import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from "@angular/router"; /* 호출 관계 테스트     1. /proc 열기         shouldReuseRoute. future: /, curr : /         retrieve : /         retrieve : /         retrieve : /proc/         retrieve : /proc/         shouldAttach : /         shouldAttach : /proc/     2. /mem 이동         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /proc/, curr : /mem/         retrieve : /mem/         retrieve : /mem/         shouldDetach : /proc/         store : /proc/         shouldAttach : /mem/     3. /net 이동         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /mem/, curr : /net/         retrieve : /net/         retrieve : /net/         shouldDetach : /mem/         store : /mem/         shouldAttach : /net/     4. /mem 로 다시 이동         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /, curr : /         shouldReuseRoute. future: /net/, curr : /mem/         retrieve : /mem/         retrieve : /mem/         shouldDetach : /net/         store : /net/         shouldAttach : /mem/         retrieve : /mem/         store : /mem/ */ export class CustomReuseStrategy implements RouteReuseStrategy {     handlers: { [key: string]: DetachedRouteHandle } = {};     retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {         let key = this.calcKey(route);         console.log('retrieve : ' + key);         return this.handlers[key];     }     shouldAttach(route: ActivatedRouteSnapshot): boolean {         let key = this.calcKey(route);         console.log('shouldAttach : ' + key);         return !!this.handlers[key];     }          store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {         let key = this.calcKey(route);         console.log('store : ' + key);         this.handlers[key] = handle;     }     shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {         console.log('shouldReuseRoute. future: ' + this.calcKey(future) + ', curr : ' + this.calcKey(curr));         return future.routeConfig === curr.routeConfig;     }     shouldDetach(route: ActivatedRouteSnapshot): boolean {         console.log('shouldDetach : ' + this.calcKey(route));         return true;     }     calcKey(route: ActivatedRouteSnapshot) {         let url = '/';         for (var i=0; i<route.pathFromRoot.length; ++i) {             const r = route.pathFromRoot[i];             if (!r.url) continue;             for (var j=0; j<r.url.length; ++j) {                 const u = r.url[j];                 if (!u.path) continue;                 url += u.path + '/';             }         }         // console.log(url);         if (!url.length) return undefined;         return url;     } }

난 app.module.ts 하위의 layout.module.ts에 장창 함

import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { RouteReuseStrategy } from '@angular/router'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { CustomReuseStrategy } from './common'; @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     BrowserAnimationsModule,     AppRoutingModule   ],   providers: [     { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }   ],   bootstrap: [ AppComponent ] }) export class AppModule { }

참고:

https://stackoverflow.com/questions/41280471/how-to-implement-routereusestrategy-shoulddetach-for-specific-routes-in-angular

http://kokohapps.tistory.com/entry/Angular4-Route-%EC%83%81%ED%83%9C-%EC%A0%80%EC%9E%A5%ED%95%B4%EB%91%90%EA%B8%B0-RouteReuseStrategy-%EA%B5%AC%ED%98%84

http://closer27.github.io/frontend/2017/02/22/angular2-custom-reuse-strategy/

https://github.com/manfredsteyer/angular-2-reuse-strategy-sample/blob/master/app/shared/router/custom-reuse-strategy.ts

https://stackoverflow.com/questions/42643748/angular-2-implementing-routereusestrategy