Angular 4+:手动重定向到路由

时间:2017-11-06 09:28:08

标签: angular

我刚刚开始使用角度4而不是angular.js 1.

我已经按照英雄教程了解角度4的基本原理,我目前正在使用角度自己的" RouterModule"来自" @ angular / router"封装

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

8 个答案:

答案 0 :(得分:133)

角度路由:手动导航

首先,您需要导入角度路由器:

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

答案 1 :(得分:6)

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

答案 2 :(得分:3)

你应该在你的构造函数中注入Router;

constructor(private router: Router) { }

然后你可以随心所欲地做到这一点;

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

答案 3 :(得分:3)

手动

角度重定向:导入@angular/router,在constructor()中注入,然后拨打this.router.navigate()

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

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

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

答案 4 :(得分:0)

试试这个:

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

答案 5 :(得分:0)

这应该有效

this.router.navigate([&#39; /路径&#39;]);

答案 6 :(得分:0)

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

答案 7 :(得分:0)

对于您的问题,您可能有足够的正确答案,但是如果您的IDE向您发出警告

  

导航返回的承诺将被忽略

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