在角2中，我不能在不重新加载的情况下在子组件之间路由。

Question

我们有三个组成部分。AppComponent包含两个子组件，即LoginComponent和LandingPageComponent。@Rougeconfig已经在AppComponent中定义了。但不幸的是，我无法从登录到LandingPage。

AppComponent

import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {LoginComponent} from '../app-components/login/login.component';
import {LandingPageComponent} from '../app-components/landing-page/landing-page.component';

@Component({
    selector: 'My-app',
    templateUrl: './app/app-components/app.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]     
})
@RouteConfig([
  {
    path: '/login',
    name: 'Login',
    component: LoginComponent,
    useAsDefault: true
  },
  {
    path: '/landing-page',
    name: 'Landing-page',
    component: LandingPageComponent,
   }
])
export class AppComponent { }

LoginComponet

import {Component} from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router} from 'angular2/router';
import {NgForm}    from 'angular2/common';
import {LandingPageComponent} from '../landing-page/landing-page.component'

@Component({
    selector: 'login',
    template: '<a [routerLink]="['Landing-page']">Landing-page</a>',
    styleUrls:['./app/app-components/login/login.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS] 

})

export class LoginComponent { 

    //DECLARATIONS
   login={username:"",password:""} ; 
   active = true;
   submitted = false;
   router: Router;

   logineduser=logindec; 
   //constructor(private _router:Router) {}

  constructor(_router: Router){   
      this.router = _router;

   }
  onauth() { 
      this.submitted = true;
      if(this.logineduser.username==this.login.username&&this.logineduser.password==this.login.password){
         this.router.navigateByUrl('/landing-page');
         location.reload();
      }      
   }       
}

var logindec={
    username:"sampleuser",
    password:"a"
} ; 

LandingPageComponet

import {Component} from 'angular2/core';

@Component({
    selector: 'login',
    template:'<h1>Landing Page</h1>'
})
export class LandingPageComponent {}

Answer 1

删除

providers: [ROUTER_PROVIDERS] 

除了你的AppComponent