Question

由于在2.0.0-rc.1内使用router.navigate router.navigateByUrl或ngOnInit似乎无法正常工作。

我没有收到错误或任何内容，但看起来navigate发生得太早，因为在HomeComponent之后加载LetterComponent并“替换”{{1}的内容}}。但是网址是正确的（/letter）。

如果我将导航放在setTimeout中1000ms，则可以再次使用。

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

请注意：通常指定导航位置的值来自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"]);
  }
}

发生了什么事情的{p> Here's a demo。当我在没有路径的情况下访问应用程序时，它应该直接导航到/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

<强>更新

因此，我下载了您的代码以查看问题所在。

Router documentation建议使用navigate()代替 navigateByUrl()。所以你可能想要改变它。
似乎根路由覆盖了您的子路由。

要解决此问题，您只需将当前的根路由放入单独的子路由中，例如。 /home。

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

我找不到任何有关此行为的文档，但由于与此类似的原因，即使angular.io中的Angular tutorial也没有根路由。它只有/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 2

尝试将其移至routerOnActivate而不是ngOnInit。您可以通过导入OnActivate并在班级中实施它来实现。

同时确保使用ROUTER_PROVIDERS引导您的应用。

Answer 3

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

当我得到答案/它已修复时，我会在这里用解决方案（如果有的话）更新这个答案。

与此同时，有一个解决方法，请参阅@funkycoder帖子。即使大多数用户的解决方法可能也不满意。

Answer 4

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

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

Answer 5

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

ngOnInit() {
    this.redirectToPath();
}

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

Answer 6

可能你应该这样做 setTimeout(() => this._router.navigate(["/letter"]), 0);

在2.0.0-rc.1上的导航和导航BiUrl在ngOnInit中无法正常工作

6 个答案: