Angular에서 링크 전환 문제

라우팅에서 발생하는 링크 전환 문제를 해결하는 방법을 살펴봅시다. 이 문제는 Angular에 이미 포함된 라이브러리인 RxJS를 사용하여 해결할 수 있습니다.

먼저 Subscription 클래스를 가져옵니다:

app/aaaa/aaaa.component.tsimport { Subscription } from 'rxjs';

비공개 속성을 만듭니다:

app/aaaa/aaaa.component.tsexport class AaaaComponent { 
  private subscription: Subscription;
}

id라는 이름의 매개변수를 저장할 속성을 생성합니다:

app/aaaa/aaaa.component.tsexport class AaaaComponent { 
  id: number | undefined;
  private subscription: Subscription;
}

이제 라우트의 id 매개변수 변경을 구독합니다:

app/aaaa/aaaa.component.tsexport class AaaaComponent { 
  id: number | undefined;
  private subscription: Subscription;
  
  constructor(private activateRoute: ActivatedRoute) {
    this.subscription = activateRoute.params.subscribe(params => this.id = params['id']);
  }
}