从登录页面路由到app angular2

Question

我很高兴使用angular2并开发应用程序。我被困在登录页面。单击登录按钮后，URL会更改但视图不会更改。我有3个组件：main（定义路由），登录和app。

main.ts

import { Component } from 'angular2/core';
import { ROUTER_DIRECTIVES, Router, RouteConfig, RouterOutlet } from 'angular2/router';
import { app } from './app.component';
import { Login } from './login.component';

@Component({
    selector: 'main',
    template: '<router-outlet></router-outlet>',
    directives: [RouterOutlet]
})

@RouteConfig([
    { path: '/app/:searchId', name: 'App', component: App },
    { path: '/login', name: 'Login', component: Login,useAsDefault:true }
])
export class RouteComponent {

}

登录

//some imports...
@Component({
template:`<button (ngSubmit)=onSubmit(username,password)>`})//did not include other labels and inputs etc`
export class Login{
  onSubmit(username:string,password:string)
  {
    some authentication....
    this._router.navigate(['App',{searchId:this.sessionId}]);
  }
}

boot.ts

import { bootstrap  } from 'angular2/platform/browser';
import{provide} from "angular2/core";
import { ROUTER_PROVIDERS,LocationStrategy,HashLocationStrategy } from 'angular2/router';
import { RouteComponent } from './main';

bootstrap(RouteComponent,[
  ROUTER_PROVIDERS,
  provide(LocationStrategy,{useClass:HashLocationStrategy})
]);

Answer 1

如果浏览器位置已更新但视图不是，因为找不到路径。 您应该尝试更新此行

this._router.navigate(['App',{searchId:this.sessionId}]);

带

this._router.navigate(['../App',{searchId:this.sessionId}]);

login中的路由器实例是main

中的路由器实例

Answer 2

导入App组件时，我在代码中看到了拼写错误：

import { Component } from 'angular2/core';
import { ROUTER_DIRECTIVES, Router, RouteConfig, RouterOutlet } from 'angular2/router';
import { app } from './app.component'; // <--------
import { Login } from './login.component';

@Component({
  selector: 'main',
  template: '<router-outlet></router-outlet>',
  directives: [RouterOutlet]
})
@RouteConfig([
  { path: '/app/:searchId', name: 'App', component: App },
  { path: '/login', name: 'Login', component: Login,useAsDefault:true }
])
export class RouteComponent {

}

你应该改用：

import { App } from './app.component';

onSubmit组件中的OnSubmit方法也是Login ...