Angular 5 router.navigate 行不通

Question

我正在尝试根据某些条件将用户重定向到另一个页面。这是我的示例登录组件：

  ngOnInit() {
    console.log(">>> router", this.router)
    console.log(">>> activatedRoute", this.activatedRoute)

    if (this.activatedRoute.queryParams['value'].param === 'value') {
      console.log(">>> redirecting")
      this.router.navigate(['home']);
    }
  }

如果我在没有参数的情况下导航到登录组件，那么我会看到登录组件模板，这很好。

但是，当我使用名为 param 的参数和 value 的值导航到登录组件时，我想将用户重定向到主页。那是行不通的。

这是我的主页路由：

import { NgModule } from '@angular/core';

import { HomeComponent } from './home.component';
import { RouterModule, Routes } from '@angular/router';

const thisRoute: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(thisRoute, {
      useHash: true, initialNavigation: false
    })
  ],
  declarations: [
    HomeComponent
  ]
})
export class HomeModule { }

我在 github 中创建了一个测试项目供您下载并运行在您的计算机上。只需下载此项目：https://github.com/wvary/route-test

运行 npm install.

然后运行 npm run start.

导航到 http://localhost:8080/#/home

您应该会看到如下内容：

点击三个link可以看到每一页的内容。思路是点击中间的时候在首页link.

谢谢

Answer 1

queryParams 是Observable，所以你不能通过这种方式从中获取参数。这里要注意的另一件事是 queryParams 在这个版本的 Angular 中被 queryParamMap.

取代了

Here描述了如何正确使用它。

Answer 2

请试试这个：

const thisRoute: Routes = [
  {
    path: 'home',
    component: HomeComponent
  }
];
export const routing = RouterModule.forRoot(thisRoute);

@NgModule({
  imports: [
   routing
    })
  ],
  declarations: [
    HomeComponent
  ]
})

Answer 3

试试这个 this.router.navigate(['../home']);

Angular 5 router.navigate 行不通

Angular 5 router.navigate does not work

redirect

routing

navigateurl

angular