Angular: redireccionamiento manual a la ruta

Recientemente comencé a usar angular 4 en lugar de angular.js 1.

He seguido el tutorial de héroes para aprender sobre los fundamentos de angular 4 y actualmente estoy usando el propio "RouterModule" de angular del paquete "@ angular / enrutador".

Para implementar alguna autorización para mi aplicación, me gustaría saber cómo redirigir manualmente a otra ruta, parece que no puedo encontrar ninguna información útil sobre esto en Internet.

Enrutamiento angular: navegación manual

Primero necesitas importar el enrutador angular:

import {Router} from "@angular/router"

Luego inyéctelo en su constructor de componentes:

constructor(private router: Router) { }

Y finalmente llame al .navigatemétodo en cualquier lugar que necesite "redirigir":

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

También puede poner algunos parámetros en su ruta, como user/5:

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

Documentación: Documentación oficial de Angular

Redirección en el botón angularjs 4 para eventos en, por ejemplo: app.home.html

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

y en 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'])
 }
 }

Deberías inyectar Router en tu constructor así;

constructor(private router: Router) { }

entonces puedes hacer esto donde quieras;

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

Redirección angular manualmente: importar @angular/router, inyectar y constructor()luego llamar this.router.navigate().

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

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

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

Prueba esto:

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

Redirigir a otra página usando la función en el archivo 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>   

Es posible que tenga suficientes respuestas correctas para su pregunta, pero en caso de que su IDE le dé la advertencia

La promesa devuelta por navegar se ignora

puede ignorar esa advertencia o usar this.router.navigate(['/your-path']).then().

Esto debería funcionar

import { Router } from "@angular/router"

export class YourClass{

   constructor(private router: Router) { }

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

}