从登录页面路由到应用程序angular2

Question

使用angular2是一个新手，正在开发一个应用程序。 我被困在登录页面上。 单击登录按钮后，URL会更改，但视图不会更改。 我有3个组成部分：主要（定义路线），登录名和应用程序。

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方法也是Login组件中的OnSubmit ...