Angular의 자식 라우트

이미 라우팅에 사용되고 있는 컴포넌트 내부에도 자식 컴포넌트가 있을 수 있습니다. 이 자식 컴포넌트들도 라우팅을 통해 표시되도록 만들 수 있습니다.

예를 들어 Aaaa 컴포넌트가 있다고 가정해 봅시다. 이 컴포넌트는 /aaaa/ URL을 통해 접근합니다. 여기에 두 개의 자식 컴포넌트: Chix와 Chiy를 더 만들어 보겠습니다. 이들을 Aaaa 컴포넌트의 템플릿 내부에 표시할 것입니다. Aaaa는 자체 router-outlet 태그를 가지며, 이 안에 URL에 따라 하나 또는 다른 자식 컴포넌트가 표시됩니다.

그럼, 설명한 내용을 구현해 보겠습니다.

첫 번째 자식 컴포넌트를 생성합니다:

ng generate component chix

두 번째 자식 컴포넌트를 생성합니다:

ng generate component chiy

별도의 자식 라우트를 작성합니다:

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

이들을 Aaaa 컴포넌트의 라우트에 자식으로 추가합니다:

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

부모 컴포넌트 라우트의 경로는 자식 경로의 시작 부분이 됩니다. 즉, 자식 컴포넌트는 다음 URL을 통해 접근할 수 있습니다: /aaaa/chix 와 /aaaa/chiy.

이제 Aaaa 컴포넌트를 설정해 보겠습니다. 라우팅 태그를 임포트합니다:

import { RouterOutlet } from '@angular/router';

데코레이터에 선언합니다:

@Component({
	......
	imports: [RouterOutlet],
	......
})

태그를 템플릿에 삽입합니다:

<p>동작합니다</p>
<router-outlet></router-outlet>

이제 자식 컴포넌트에 해당 URL로 접근하면 해당 컴포넌트들이 표시됩니다. 시도해 보세요!

설명된 자식 컴포넌트의 동작을 구현하세요.

자식 컴포넌트를 전환할 수 있는 링크를 만드세요.