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

navigate and navigateByUrl not working correctly in ngOnInit on 2.0.0-rc.1

本文关键字：常工作 工作 ngOnInit navigateByUrl 上的 0-rc navigation      更新时间：2023-09-26

由于2.0.0-rc.1 router.navigate或router.navigateByUrl在ngOnInit内部使用时似乎不再正常工作。

我没有得到错误或任何东西，但看起来navigate发生得太早了，因为紧接着HomeComponent就被加载并"替换"了LetterComponent的内容。但是URL是正确的（/letter）。

如果我把导航放在1000毫秒的setTimeout中，它会再次工作。

我需要使用不同的生命周期事件吗？还是我做错了什么？还是一个bug？

注意：通常，指定导航到哪里的值来自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"]);
  }
}

也许你应该这么做setTimeout(() => this._router.navigate(["/letter"]), 0);

更新

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

  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';

尝试将其移动到routerOnActivate而不是ngOnInit。您可以通过导入OnActivate并在类中实现它来完成此操作。

此外，请确保您正在使用ROUTER_PROVIDERS引导您的应用程序。

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

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

与此同时，还有一个变通办法，请参阅@funkycoder帖子。尽管这种变通方法对大多数用户来说可能也不令人满意。

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

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

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

我认为，如果你重新排序了路线，使路线"/"是最后一条，那么它就会正确匹配"/字母"。

在其他情况下，您可能有一个href="在标记中，wich在router.navigation 之后被覆盖

相关文章：