Angular에서 라우팅을 위한 링크

이전 강의에서는 URL을 수동으로 주소 표시줄에 입력했습니다. 이제 다양한 컴포넌트를 표시하는 링크를 만들어 보겠습니다.

이를 위해 특별한 방식으로 링크를 만들 것입니다. 사실 우리에게 필요한 것은 실제 링크 이동이 아닙니다. 우리는 단지 Angular가 다른 컴포넌트를 표시하고, 브라우저 주소 표시줄의 URL을 변경하면서 페이지를 새로 고치지 않기를 원합니다.

따라서 기본 속성인 href 대신 Angular의 RouterLink 속성을 사용할 것입니다.

이를 사용하려면 먼저 가져와야 합니다:

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

데코레이터에 지정합니다:

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

이제 링크를 만들 수 있습니다:

<nav>
	<a routerLink="/aaaa/">
		Aaaa
	</a>
	<a routerLink="/bbbb/">
		Bbbb
	</a>
</nav>

여러분의 컴포넌트를 전환하는 링크를 만드세요.