Angular: redirecionamento manual para a rota

Recentemente, comecei a usar o angular 4 em vez do angular.js 1.

Eu segui o tutorial dos heróis para aprender sobre os fundamentos do angular 4 e atualmente estou usando o próprio "RouterModule" do angular do pacote "@ angular / router".

A fim de implementar alguma autorização para meu aplicativo, gostaria de saber como redirecionar manualmente para outra rota, não consigo encontrar nenhuma informação útil sobre isso na internet.

Roteamento angular: navegação manual

Primeiro você precisa importar o roteador angular:

import {Router} from "@angular/router"

Em seguida, injete-o em seu construtor de componente:

constructor(private router: Router) { }

E, finalmente, chame o .navigatemétodo em qualquer lugar que você precise "redirecionar":

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

Você também pode colocar alguns parâmetros em sua rota, como user/5:

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

Documentação: Documentação oficial Angular

Redirecionamento no angularjs 4 Botão para evento em, por exemplo: app.home.html

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

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

Você deve injetar Router em seu construtor assim;

constructor(private router: Router) { }

então você pode fazer isso em qualquer lugar que quiser;

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

Redirecionamento angular manualmente: Importar @angular/router, injetar constructor()e chamar this.router.navigate().

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

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

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

Experimente isto:

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

Você pode ter respostas corretas suficientes para sua pergunta, mas no caso de seu IDE lhe dar o aviso

A promessa retornada de navegar é ignorada

você pode ignorar esse aviso ou usar this.router.navigate(['/your-path']).then().

Redirecionar para outra página usando a função no arquivo 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>

Isso deve funcionar

import { Router } from "@angular/router"

export class YourClass{

   constructor(private router: Router) { }

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

}