navigate 和 navigateByUrl 在 2.0.0-rc.1 上的 ngOnInit 中无法正常工作

Question

因为

2.0.0-rc.1

router.navigate

或

router.navigateByUrl

在

ngOnInit

内部使用时似乎不再正常工作。

我没有收到错误或任何错误，但看起来

navigate

发生得太早了，因为在它之后，

HomeComponent

就被加载并“替换”了

LetterComponent

的内容。不过网址是正确的 (

/letter

)。

如果我将导航置于

setTimeout

中，时间为 1000 毫秒，它会再次工作。

我是否需要使用不同的生命周期事件或者我做错了什么？或者这是一个错误？

请注意：通常指定导航到何处的值来自 cookie（是动态的）。

这是我简化的应用程序组件：

@Component({
  selector: 'my-app',
  templateUrl: './app/app.component.html',
  directives: [ROUTER_DIRECTIVES]
})
@Routes([
  { path: '/', component: HomeComponent },
  { path: '/letter',component: LetterComponent },
  { path: '/cv', component: CVComponent },
  { path: '/attachment', component: AttachmentComponent }
])
export class AppComponent implements OnInit {

  constructor(private _router: Router) {
  }

  ngOnInit() {
      // todo: currently not working correctly (issue?)
      //also doesn't work: this._router.navigateByUrl("/letter");
      this._router.navigate(["/letter"]);
  }
}

这是所发生情况的演示。 当我在没有路径的情况下访问应用程序时，它应该直接导航到

/letter

“页面” - 正如您可以看到 URL 发生变化，但内容是错误的（内容是主页组件的内容）。

---

更新：

这是我的进口，如果它们有任何相关性的话：

import {Component} from '@angular/core';
import {Router, Routes, ROUTER_DIRECTIVES} from '@angular/router';
import {OnInit} from '@angular/core';

这是我的引导：

import { bootstrap }  from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
import {ROUTER_PROVIDERS} from '@angular/router';
import 'rxjs/Rx';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);

关于@eburgers 帖子：

这就是我所做的：

import {Component} from '@angular/core';
import {Routes, ROUTER_DIRECTIVES, Router, ROUTER_PROVIDERS, OnActivate} from '@angular/router';
import {OnInit} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app/app.component.html',
  directives: [ROUTER_DIRECTIVES]
})
@Routes([
  { path: '/', component: HomeComponent },
  { path: '/letter',component: LetterComponent },
  { path: '/cv', component: CVComponent },
  { path: '/attachment', component: AttachmentComponent }
])
export class AppComponent implements OnActivate {

  constructor(private _router: Router) {
  }

  routerOnActivate() {
      // todo: currently not working correctly (issue?)
      //also doesn't work: this._router.navigateByUrl("/letter");
      this._router.navigate(["/letter"]);
  }
}

Answer 1

也许你应该这样做

setTimeout(() => this._router.navigate(["/letter"]), 0);

Answer 2

更新

所以，我下载了你的代码来看看问题是什么。

1. 路由器文档建议使用

   navigate()

   代替

   navigateByUrl()

   。所以你可能想改变这一点。
2. 根路线似乎覆盖了您的子路线。

要解决这个问题，你只需要将当前的根路由放入一个单独的子路由中，例如：

/home

。

{ path: '/home', component: HomeComponent }

我找不到此行为的任何文档，但由于与此类似的原因，即使是 angular.io 上的 Angular 教程 也没有根路由。它只有

/dashboard

、

/heroes

和

/detail/:id

。

---

之前的回答

看起来您在 @Component 声明中缺少 ROUTER_PROVIDER 。 尝试将其添加为：

@Component({
  selector: 'my-app',
  templateUrl: './app/app.component.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS]
})

此外，导入适当的参考文献：

import {Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';

Answer 3

尝试将其移至

routerOnActivate

而不是

ngOnInit

。 您可以通过导入

OnActivate

并在课堂上实现它来实现。

还要确保您使用

ROUTER_PROVIDERS

引导您的应用程序。

Answer 4

我很确定这是一个错误。 我在 github 上打开了一个新问题：https://github.com/angular/angular/issues/8733

当我得到答案/它已修复时，我将在此处使用解决方案更新此答案（如果有）。

与此同时，有一个解决方法，请参阅@funkycoder 帖子。尽管该解决方法适合大多数用户，但可能也无法令人满意。

Answer 5

你现在可能已经解决了这个问题，但我想知道你的路线顺序是否是真正的问题。 如果我没记错的话，路由器会尝试将路径与给定的路径进行匹配。因此，在您的列表中，“/letter”首先匹配路线“/”，因此它返回“HomeComponent”。

我认为，如果您重新排序了路线，使路线“/”位于最后，那么它将正确匹配“/letter”。

Answer 6

我不知道这是一个错误还是你做错了什么。但我建议不要使用超时方法，而是采用以下方法：

ngOnInit() {
    this.redirectToPath();
}

redirectToPath() {
    this._router.navigate(["/letter"]);
}

Answer 7

在其他情况下，标签中可能有一个 href="#"，它在 router.navigate 之后被覆盖

Answer 8

正确的导入块 => import { Router } from '@angular/router'; 错误的导入块 => import { Router } from 'express';