Программная навигация в Angular

Переходить по урлам можно не только с помощью ссылок, но и внутри кода JavaScript, с помощью специальных команд.

Это делается с помощью сервиса Router. Давайте посмотрим, как с ним работать. Для начала импортируем его:

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

Теперь внедрим в компонент с помощью инъекции зависимости:

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

У сервиса есть метод navigate, который переходит на заданный URL. Воспользуемся этим методом:

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>