[Angular] Typescript로 다른 Router-Outlet의 화면 변경하기

가끔 여러 개의 Router-Outlet을 선언해서 사용해야 할 때가 있다. 여러 개를 선언하면 어느 Router-Outlet의 페이지를 변경시킬 것인지 명시를 해줘야 하는데 아래와 같이 사용하면 된다.

선언

<router-outlet name="headerOutlet"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footerOutlet"></router-outlet>

<router-outlet>이 이런 식으로 선언되어 있다고 가정했을 때, 아래와 같이 사용하면 된다.

navigate 사용 방법

this.router.navigate( [ `./`, { outlets: { 'headerOutlet': 'header11' } } ] );

아 참고로 header11이 path이다. 그리고 router 객체를 가져오는 건 provider를 이용하면 된다.