Angolare: reindirizzamento manuale alla rotta

Di recente ho iniziato a utilizzare angular 4 invece di angular.js 1.

Ho seguito il tutorial degli eroi per conoscere i fondamenti di angular 4 e attualmente sto usando il "RouterModule" di angular dal pacchetto "@ angular / router".

Al fine di implementare alcune autorizzazioni per la mia applicazione vorrei sapere come reindirizzare manualmente a un altro percorso, non riesco a trovare alcuna informazione utile su Internet.

Routing angolare: navigazione manuale

Per prima cosa devi importare il router angolare:

import {Router} from "@angular/router"

Quindi iniettalo nel tuo costruttore di componenti:

constructor(private router: Router) { }

E infine chiama il .navigatemetodo ovunque tu abbia bisogno di "reindirizzare":

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

Puoi anche inserire alcuni parametri sul tuo percorso, come user/5:

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

Documentazione: documentazione ufficiale angolare

Reindirizzamento in angularjs 4 Pulsante per eventi in es: app.home.html

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

e in 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'])
 }
 }

Dovresti iniettare Router nel tuo costruttore in questo modo;

constructor(private router: Router) { }

quindi puoi farlo ovunque tu voglia;

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

Reindirizzamento angolare manualmente: importazione @angular/router, iniezione constructor()e chiamata this.router.navigate().

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

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

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

Prova questo:

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

Potresti avere abbastanza risposte corrette per la tua domanda, ma nel caso in cui il tuo IDE ti dia l'avvertimento

La promessa restituita dalla navigazione viene ignorata

puoi ignorare quell'avvertimento o usare this.router.navigate(['/your-path']).then().

Reindirizza a un'altra pagina utilizzando la funzione sul file component.ts

componene.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>

Questo dovrebbe funzionare

import { Router } from "@angular/router"

export class YourClass{

   constructor(private router: Router) { }

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

}