angular2 RC.1:router.navigate()无效

时间:2016-06-01 02:19:42

标签: angular angular2-routing

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

RootComponent

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调用将浏览器网址更改为localhost:4001/newgateway,但未加载组件。只有刷新浏览器页面后,才会调用newgatewayComponent构造函数。

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

欣赏任何指示。

3 个答案:

答案 0 :(得分:0)

我认为您需要添加/,但问题并未提供足够的信息以确定

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

答案 1 :(得分:0)

确定问题..错过了我的package.json

中的以下依赖项
"@angular/compiler": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",

答案 2 :(得分:0)

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

相关问题