Angular'da Programlı Navigasyon

URL'ler arasında geçiş yapmak sadece bağlantılar (linkler) ile değil, aynı zamanda JavaScript kodu içinde, özel komutlar kullanılarak da yapılabilir.

Bu, Router servisi kullanılarak yapılır. Hadi onunla nasıl çalışılacağına bir göz atalım. İlk olarak onu içe aktaralım:

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

Şimdi, bağımlılık enjeksiyonu (dependency injection) kullanarak komponente enjekte edelim:

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

Servisin, belirtilen URL'ye giden navigate adlı bir metodu vardır. Bu metodu kullanalım:

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

Ve şimdi go metodunu bir butona tıklandığında çağıralım:

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