Route : 라우팅규칙 객체
Router : 네비게이션 객체
ActivatedRoute : 현재 라우팅정보 서비스
라우팅모듈에서 Route객체를 생성해서 라우팅규칙을 지정해야 한다.
라우팅인자정보가 필요할 경우 ActivatedRoute서비스를 의존주입하고 paramMap객체를 switchMap으로 인자를 검색한다.
Router객체를 navigate메소드를 사용하면 컴포넌트 전환할 수 있다.
Router.navigate를 사용하면 페이지로딩없이 같은 컴포넌트를 라우팅인자만 변경해서 전환할 수 있다.
이때 ngOnInit은 다시 호출되지 않는다.
ActivatedRoute.paramMap은 옵저버블객체이기 때문에 navigate로 같은 컴포넌트를 전환하면 옵저버블객체가 반응한다.
컴포넌트전환없이 컴포넌트 재사용이 없는 경우라면 내부적으로 라우팅변수가 변하지 않는다는 것이다.
이런 경우에는 ActivatedRoute.paramMap 옵저버블객체를 사용하지 않아도 된다.
activatedRoute.snapshot.paramMap.get('id')으로 옵저버블객체를 구독하거나 연산자를 사용하지 않아도 된다.
목록페이지에서 아이템클릭시 컴포넌트전환이 없이 url이 변경되는 경우
ngOnInit() {
this.crises$ = this.route.paramMap.pipe(
switchMap(params => {
this.selectedId = Number(params.get('id')!);
return this.service.getCrises();
})
);
}OnInit의 this.route.paramMap...은 로딩시 한번만 실행되고 아이템클릭 url변경시 재실행되지 않기때문에 id값을 알수가 없다.
클릭이벤트시 필요한 작업을 수행하거나 this.route.paramMap.subscribe로 구독해서 변화감지를 해야 한다.
상품목록아래 상세컴포넌트가 있을때 상품목록의 아이템클릭시 상세컴포넌트 전환시에는 OnInit의 this.route.paramMap가 매번 호출된다.
이것으로보아 다른 외부 이벤트로 url매개변수가 변경되면 this.route.paramMap가 호출된다.
