[Angular] Same Url Reload

안녕하세요! aloveu입니다.

오랜만에 블로그 글을 씁니다. 한동안 바쁘기도 했고 블로그에 흥미를 잠시 잃어 소홀했습니다. ㅠ

 

프로젝트를 진행하다가 정리할 게 있어서 잠깐 블로그에 들린 김에 끄적여봅니다.

 

Angular에서 동일한 url로 이동할 때는 아무런 반응을 하지 않습니다.
메인에서 로고를 눌렀을 때 새로 API를 당겨 와야하는 니즈가 있어서 찾다 보니 여러 가지 방법이 있었습니다. 

우선 첫번째는 다른 라우터를 이동했다가 다시 요청한 url로 돌아오는 방법이에요.

this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
    this.router.navigate([this.router.url]));

 

단점은 루트(/)로 갔다가 다시 돌아오는 거기 때문에 메인에서 메인은 Reload 하지 않습니다. 다른 dummy router를 생성하면 되긴 합니다만 가끔 meta title이 안 바뀐다거나 자잘한 이슈가 있습니다. 

 

그래서 찾은 두번째,

앵귤러 라우터에는 shouldReuseRoute라는 메서드가 있는데 이걸 false로 하게 되면 라우트를 재사용하지 않습니다.

따라서 같은 라우트면 reload를 하게 되는 거죠.

private saveRouterStrategyReuseLogic: any;

ngOnInit() {
    this.saveRouterStrategyReuseLogic = this.router.routeReuseStrategy.shouldReuseRoute;
    this.router.routeReuseStrategy.shouldReuseRoute = (future, curr) => { return false; };
}

ngOnDestroy() {
    this.router.routeReuseStrategy.shouldReuseRoute = 
this.saveRouterStrategyReuseLogic;

}

리로드를 해야 하는 페이지 진입 때 기존 shouldReuseRoute를 어떤 변수에 저장한 후에 false로 설정을 해주고 나서 페이지를 떠날 때 다시 저장한 값을 다시 바인딩하는 방법입니다. 

 

뭔가... 짜치는 느낌이 납니다.

저 shouldReuseRoute를 상속받아 커스텀한 다음에 처리하는 게 훨씬 사용하기 좋아 보입니다.
아래 세 번째 방법처럼 이요.

export const routes: Routes = [
	{
		path: '',
		loadComponent: ()=> import(....)....,
		data:{
        	shouldReuse: false,
        }
	},
	...
]

 

우선 reuse를 해야 하는 라우트 파일 데이터에 boolean값을 추가를 해주고요.

appConfig 파일에서 BaseRouteReuseStrategy를 상속받아서 CustomRouteReuseStrategy를 만들어주고, providers에 추가해줍니다. 

class CustomRouteReuseStrategy extends BaseRouteReuseStrategy {
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
        return future.data.shouldReuse ?? future.routeConfig === curr.routeConfig;
    }
}


export const appConfig: ApplicationConfig = {
    providers: [
        { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy },
		...
	],
};

 

그러면 route 파일 > data에서 shouldReuse가 false인 라우트만 reload가 적용됩니다. 

 

그럼 여기까지 읽어주셔서 감사합니다.