Angular에서의 프로그래밍 방식 네비게이션

URL로 이동하는 것은 링크를 통해서뿐만 아니라 JavaScript 코드 내부에서 특별한 명령을 사용하여 수행할 수도 있습니다.

이는 Router 서비스를 사용하여 수행됩니다. 작동 방법을 살펴보겠습니다. 먼저 이를 임포트합니다:

import { Router } from "@angular/router";

이제 의존성 주입을 통해 컴포넌트에 주입합니다:

export class AppComponent {
	constructor(private router: Router) {
	
	}
}

이 서비스에는 주어진 URL로 이동하는 navigate 메서드가 있습니다. 이 메서드를 사용해 보겠습니다:

export class AppComponent {
	constructor(private router: Router) {
	
	}
	
	go() {
		this.router.navigate(['/aaaa/']);
	}
}

이제 버튼 클릭 시 go 메서드를 호출합니다:

<button (click)="go()">btn</button>

두 개의 버튼을 만드세요. 첫 번째 버튼은 하나의 URL로 이동하고, 두 번째 버튼은 다른 URL로 이동하도록 합니다.