angular2 RC.1：router.navigate() 不工作

Question

我最近将我的应用程序从 Angular 2.0.0-beta.12 升级到 Angular2.0.0-rc.1。我正在使用 router-deprecated 模块进行路由。加载默认登录路由后，router.navigate(['Newgateway']) 似乎无法正常工作。

根组件

import { Component, provide } from '@angular/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
import { LoginComponent } from './loginComponent';
import {NewGatewayComponent} from './newGatewayComponent';

@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS],
    selector: 'root-comp',
    template: `<router-outlet></router-outlet>`,
})
@RouteConfig([
    { path: '/newgateway',name: 'Newgateway',component: NewGatewayComponent},    
    { component: LoginComponent, name: 'Login', path: '/login', useAsDefault: true},
    { path: '/', redirectTo: ['/Login']}
])
export class RootComponent{ 

  constructor(private _router: Router) {

  }

}

LoginFormComponent

import { Component, Inject} from '@angular/core';
import { Router, ROUTER_PROVIDERS } from '@angular/router-deprecated';

@Component({
    selector: 'login-form',
    templateUrl: './loginForm.html',
    providers: [ROUTER_PROVIDERS]
})
export class LoginFormComponent { 
    constructor(private _router: Router) {
    }   

    // if login is sucessfull, navigate back to specified URL
    redirect(result: any, loginComp: LoginFormComponent) {
       this._router.navigate(['Newgateway']);
    }
}

NewGatewayComponent

import {Component, provide} from '@angular/core';
@Component({
    selector: 'pi-new-gateway-panel',
    template: `
        <h1>Gateway</h1>
    `,
})
export class NewGatewayComponent {
   constructor() {
     console.log('loaded')
   } 
}

这里的问题是 router.navigate() 下面在 loginComponent 中的调用将浏览器 URL 更改为 localhost:4001/newgateway 但是未加载组件。只有在浏览器页面刷新后，才会调用newgatewayComponent构造函数。

this._router.navigate(['Newgateway']);

感谢任何指点。

Answer 1

我认为你需要添加 / 但问题没有提供足够的信息来确定

this._router.navigate(['/Newgateway']);

Answer 2

确定解决了问题.. 在我的 package.json

中遗漏了以下依赖项

"@angular/compiler": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",

Answer 3

假设您已将 ROUTER_PROVIDERS 包含在 bootstrap 函数中，您应将其从 LoginFormComponent.ts 的提供程序中删除。

angular2 RC.1：router.navigate() 不工作

angular2 RC.1 : router.navigate() not working

angular2-routing

angular