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

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

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

app/app.component.tsimport { Router } from "@angular/router";

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

app/app.component.tsexport class AppComponent {
  constructor(private router: Router) {
  
  }
}

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

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

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

app/app.component.html<button (click)="go()">btn</button>