Angular 5 router.navigate 不起作用答案

【问题标题】：Angular 5 router.navigate does not workAngular 5 router.navigate 不起作用
【发布时间】：2018-09-17 00:01:42
【问题描述】：

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

  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

您应该会看到如下内容：

您可以通过点击三个链接查看每个页面的内容。当你点击中间的链接时，这个想法是在主页上。

谢谢

【问题讨论】：

您是否尝试延迟加载 Home 组件？
不是我的意图，但如果这是它正在做的事情并且它不起作用的原因，那么我可以更改代码。请指教。

标签： angular redirect routing navigateurl

【解决方案1】：

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

【讨论】：

原因？解释？

【解决方案2】：

请试试这个：

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

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

【讨论】：

pioro90 的回答解决了这个问题。我的实际应用程序也不起作用。我刚刚创建了一个更简单的示例来演示该问题。你的建议不会改变任何事情，我不认为。您只是在不同的地方定义变量。

【解决方案3】：

queryParams 是 Observable 的，所以你不能通过这种方式从中获取参数。还有一点需要注意的是，在这个版本的 Angular 中 queryParams 被 queryParamMap 取代了。

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

【讨论】：

谢谢，这就行了。顺便说一句，如果我打开浏览器选项卡并导航到登录页面，为什么 ngOnInit 会加载运行？如果我单击其中一个链接，它将执行。
我不知道这是否能解决这个问题，但你应该在 HomeModule 中使用 Router.forChild(..)