Angular: Pengalihan manual ke rute

Saya baru saja mulai menggunakan angular 4, bukan angular.js 1.

Saya telah mengikuti tutorial pahlawan untuk mempelajari tentang dasar-dasar angular 4 dan saat ini saya menggunakan "RouterModule" milik angular dari paket "@ angular / router".

Untuk menerapkan beberapa otorisasi untuk aplikasi saya, saya ingin tahu cara mengarahkan ulang secara manual ke rute lain, sepertinya saya tidak dapat menemukan informasi yang berguna tentang ini di internet.

Perutean sudut: Navigasi manual

Pertama, Anda perlu mengimpor router sudut:

import {Router} from "@angular/router"

Kemudian masukkan ke dalam konstruktor komponen Anda:

constructor(private router: Router) { }

Dan terakhir panggil .navigatemetode ini di mana pun Anda perlu untuk "mengalihkan":

this.router.navigate(['/your-path'])

Anda juga dapat meletakkan beberapa parameter di rute Anda, seperti user/5:

this.router.navigate(['/user', 5])

Dokumentasi: Dokumentasi resmi sudut

Redirection in angularjs 4 Tombol untuk acara di misalnya: app.home.html

<input type="button" value="clear" (click)="onSubmit()"/>

dan di home.componant.ts

 import {Component} from '@angular/core';
 import {Router} from '@angular/router';

 @Component({
   selector: 'app-root',
   templateUrl: './app.home.html',
 })

 export class HomeComponant {
   title = 'Home';
   constructor(
     private router: Router,
    ) {}

  onSubmit() {
    this.router.navigate(['/doctor'])
 }
 }

Anda harus menyuntikkan Router di konstruktor Anda seperti ini;

constructor(private router: Router) { }

maka Anda dapat melakukan ini di mana pun Anda mau;

this.router.navigate(['/product-list']);

Angular Redirection secara manual: Impor @angular/router, Masukkan constructor()lalu panggil this.router.navigate().

import {Router} from '@angular/router';
... 
...

constructor(private router: Router) {
  ...
}

onSubmit() {
  ...
  this.router.navigate(['/profile']); 
}

Coba ini:

constructor(  public router: Router,) {
  this.route.params.subscribe(params => this._onRouteGetParams(params));
}
this.router.navigate(['otherRoute']);

Anda mungkin memiliki jawaban benar yang cukup untuk pertanyaan Anda, tetapi jika IDE Anda memberi peringatan

Janji yang dikembalikan dari navigasi diabaikan

Anda bisa mengabaikan peringatan atau penggunaan itu this.router.navigate(['/your-path']).then().

Alihkan ke halaman lain menggunakan fungsi pada file component.ts

komponene.ts:

import {Router} from '@angular/router';
constructor(private router: Router) {}

OnClickFunction()
  {
    this.router.navigate(['/home']);
  }

component.html:

<div class="col-3">                  
<button (click)="OnClickFunction()" class="btn btn-secondary btn-custom mr-3">Button Name</button>
</div>

Ini seharusnya berhasil

import { Router } from "@angular/router"

export class YourClass{

   constructor(private router: Router) { }

   YourFunction() {
      this.router.navigate(['/path']);
   }

}