导航和NavigationByUrl在2.0.0-rc.1上的ngOnInit中无法正常工作 [英] navigate and navigateByUrl not working correctly in ngOnInit on 2.0.0-rc.1

问题描述

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

我没有收到任何错误或任何提示，但是navigate似乎为时过早，因为HomeComponent紧随其后被加载并替换"了LetterComponent的内容.但是，URL是正确的(/letter).

如果我将导航放置在具有1000ms的setTimeout中，它将再次起作用.

我是否需要使用其他生命周期事件，或者我做错了什么?还是一个错误?

请注意:通常，指定导航到的值来自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更改了，但是内容是错误的(内容是home组件之一).

---

更新:

这是我的进口商品，如果与它们有任何关联:

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"]);
  }
}

解决方案

更新

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

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

Since the 2.0.0-rc.1 router.navigate or router.navigateByUrl doesn't seem to be working anymore correctly when used inside ngOnInit.

I don't get an error or anything, but it looks like the navigate happens too early, because right after it the HomeComponent is loaded and "replaces" the content of the LetterComponent. However the URL is correct (/letter).

If I put the navigate in a setTimeout with 1000ms it works again.

Do I need to use a different lifecycle event or am I doing something wrong? Or is it a bug?

Note that: normally the value which specifies where to navigate to, comes from a cookie (is dynamic).

Here's my simplified app component:

@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"]);
  }
}

Here's a demo of what happens. When I access the app without a path it should directly navigate to the /letter "page" - as you can see the URL changes, but the content is the wrong one (the content is the one of the home component).

---

Update:

Here are my imports, if they are of any relevance:

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

Here's my bootstraping:

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
]);

Regarding @eburgers post:

Here's what I did:

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"]);
  }
}

解决方案

UPDATE

So, I downloaded your code to see what the issue is.

1. the Router documentation suggests to use navigate() instead of navigateByUrl(). So you might want to change that.
2. It seems that the root route is overriding your subroute.

To resolve the issue, you simply need to put the current root route into a separate subroute, eg. /home.

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

I could not find any documentation for this behavior, but for a reason similar to this, even the Angular tutorial at angular.io does not have a root route. It only has /dashboard, /heroes and /detail/:id.

---

PREVIOUS ANSWER

Looks like you are missing the ROUTER_PROVIDER in the @Component declaration. Try adding that as:

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

Also, import the appropriate references:

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

这篇关于导航和NavigationByUrl在2.0.0-rc.1上的ngOnInit中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！