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

【问题标题】：angular2 RC.1 : router.navigate() not workingangular2 RC.1：router.navigate() 不工作
【发布时间】：2016-06-01 02:19:42
【问题描述】：

我最近将我的应用从 Angular 2.0.0-beta.12 升级到 Angular 2.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) {

  }

}

登录表单组件

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

新网关组件

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

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

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

感谢任何指针。

【问题讨论】：

我建议你创建一个 plnkr 来显示问题。然后查看新的路由器功能，看看是否可以升级...
这个问题你可以考虑一次stackoverflow.com/questions/37192628/…

标签： angular angular2-routing

【解决方案1】：

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

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

【讨论】：

尝试使用 /Newgateway .. 没有帮助.. 代码在 beta 12 中工作，但控制台上也没有错误。如果需要任何澄清，请告诉我。谢谢
如果没有运行示例，很难推断路由。你能创建一个 Plunker 来复制吗？

【解决方案2】：

好的，找到了问题.. 在我的 package.json 中错过了以下依赖项

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

【讨论】：

为什么要使用这些依赖？

【解决方案3】：

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

【讨论】：