В угловом 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

Remove

providers: [ROUTER_PROVIDERS] 

отовсюду, кроме ваших AppComponent