Angular：手动重定向到路由答案

【问题标题】：Angular : Manual redirect to routeAngular：手动重定向到路由
【发布时间】：2018-04-18 10:03:39
【问题描述】：

我最近才开始使用 angular 4 而不是 angular.js 1。

我已经按照英雄教程学习了 Angular 4 的基础知识，我目前正在使用来自“@angular/router”包的 Angular 自己的“RouterModule”。

为了对我的应用程序实施一些授权，我想知道如何手动重定向到另一个路由，我似乎无法在互联网上找到任何有用的信息。

【问题讨论】：

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

这应该可行

import { Router } from "@angular/router"

export class YourClass{

   constructor(private router: Router) { }

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

}

【讨论】：

【解决方案3】：

你应该像这样在你的构造函数中注入路由器；

constructor(private router: Router) { }

那么你可以在任何你想要的地方做这个；

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

【讨论】：

因为这是为了授权，所以您也应该在路由器保护中执行此操作。 codecraft.tv/courses/angular/routing/router-guards

【解决方案4】：

角度路由：手动导航

首先你需要导入角度路由器：

import {Router} from "@angular/router"

然后将它注入到你的组件构造函数中：

constructor(private router: Router) { }

最后在您需要“重定向”的任何地方调用.navigate 方法：

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

你也可以在你的路由中加入一些参数，比如user/5：

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

文档：Angular official documentaiton

【讨论】：

【解决方案5】：

angularjs 4 中的重定向例如：app.home.html 中的事件按钮

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

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

【讨论】：

【解决方案6】：

手动角度重定向：导入@angular/router，注入constructor()，然后调用this.router.navigate()。

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

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

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

【讨论】：

【解决方案7】：

使用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>

【讨论】：

【解决方案8】：

你的问题可能有足够的正确答案，但万一你的 IDE 给你警告

从导航返回的承诺被忽略

您可以忽略该警告或使用this.router.navigate(['/your-path']).then()。

【讨论】：