角度:手动重定向到路线


89

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

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

为了对我的应用程序执行一些授权,我想知道如何手动重定向到另一条路由,我似乎无法在Internet上找到关于此的任何有用信息。

Answers:


225

角度路由:手动导航

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

import {Router} from "@angular/router"

然后将其注入您的组件构造函数中:

constructor(private router: Router) { }

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

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

您还可以在路线上添加一些参数,例如user/5

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

文档:Angular官方文档


8

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


3

手动进行角度重定向:导入@angular/router,插入,constructor()然后调用this.router.navigate()

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

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

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


1

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

1

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

导航返回的承诺被忽略

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


0

这应该工作

import { Router } from "@angular/router"

export class YourClass{

   constructor(private router: Router) { }

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

}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.