Angulaire: redirection manuelle vers l'itinéraire

J'ai récemment commencé à utiliser angular 4 au lieu de angular.js 1.

J'ai suivi le tutoriel des héros pour en savoir plus sur les principes de base d'angular 4 et j'utilise actuellement le propre "RouterModule" d'angular du package "@ angular / router".

Afin de mettre en œuvre une autorisation pour mon application, je voudrais savoir comment rediriger manuellement vers une autre route, je ne semble pas trouver d'informations utiles à ce sujet sur Internet.

Routage angulaire: navigation manuelle

Vous devez d'abord importer le routeur angulaire:

import {Router} from "@angular/router"

Puis injectez-le dans votre constructeur de composants:

constructor(private router: Router) { }

Et enfin, appelez la .navigateméthode partout où vous avez besoin de "rediriger":

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

Vous pouvez également mettre certains paramètres sur votre itinéraire, comme user/5:

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

Documentation: Document officiel angulaire

Redirection dans angularjs 4 Button pour l'événement dans par exemple: app.home.html

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

et dans 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'])
 }
 }

Vous devez injecter Router dans votre constructeur comme ceci;

constructor(private router: Router) { }

alors vous pouvez le faire où vous voulez;

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

Redirection angulaire manuellement: importez @angular/router, injectez constructor()puis appelez this.router.navigate().

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

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

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

Essaye ça:

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

Rediriger vers une autre page en utilisant la fonction sur le fichier 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>   

Vous pouvez avoir suffisamment de réponses correctes pour votre question, mais au cas où votre IDE vous avertirait

La promesse renvoyée par la navigation est ignorée

vous pouvez ignorer cet avertissement ou utiliser this.router.navigate(['/your-path']).then().

Cela devrait fonctionner

import { Router } from "@angular/router"

export class YourClass{

   constructor(private router: Router) { }

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

}