컴포턴트전환없이 url이동

상품목록에서 아이템을 클릭하면 화면아래에 해당 상품의 내용을 보여주는 경우

상품내용 컴포넌트는 한번 로드되면 아이템이 변경될때 다시 로드하지 않고 내용만 변경하면 된다.

상품목록 아이템이 변경되면 url은 변하게되므로 상품내용컴포넌트는 이러한 url변화를 감지해야 한다.

컴포넌트 로드없이 변화를 감지하는 방법

  ngOnInit(): void {
    this.hero$ = this.route.paramMap.pipe(
      switchMap(params=>{
        return this.heroService.getHero( Number( params.get('id') ) );
      })
    );
  }

OnInit사이클에 this.route.paramMap으로 id값을 받을 수있지만 이방법은 로드될때 한번 수행되기때문에 컴포넌트로드없는 상황에서는 사용할 수 없다.

그러나 위와같이 옵저버블객체를 반환하고 템플릿에서 {{ hero$ | async }를 사용하면 앵귤러가 변화감지를 수행한다.

템플릿에서 옵저버블객체를 사용하지 않을때는 사용하지 못하는 단점이 있다.

---

리졸버서비스를 사용하면 컴포넌트 전환없이 변화감지를 할 수 있다.

  ngOnInit(): void {
    this.activatedRoute.data.subscribe(data=>{
      this.crisis = data['crisis'];
      this.editName = this.crisis.name;
    });
  }