Angular2 Routing weiß nicht, wo Router-Ausgang

Question

Ich benutze angular2 rc4 Version. Ich habe 3 Komponenten.

AppComponent: Hier, in der app.component.html Datei mache ich eine andere Komponente HomeComponent mit Wahl namens <app-home></app-home>

HomeComponent: Hier, in der home.component.html Datei gibt es einige Inhalte und ein Link zu Dashboard.

<a class="page-scroll" [routerLink]="['/dashboard']">Dashboard</a> 

DashboardComponent: hier im dashboard.component.html einige Inhaltsdatei.

In meiner main.ts Datei habe ich meine Routen deklariert und importiere meine notwendigen Komponenten. Code-Schnipsel:

import { provideRouter, ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router'; 
import { DashboardComponent } from './app/dashboard/dashboard.component'; 


const routes: RouterConfig = [ 
    { path: '', redirectTo: 'home', terminal: true }, 
    { path: 'dashboard', component: DashboardComponent } 

]; 

bootstrap(AppComponent, provideRouter(routes)); 

Jetzt das Problem. Ich füge <router-outlet></router-outlet> in meine home.component.html Datei ein und klickte dann auf den dashboard Link. Es rendert die dashboard.component.html, aber der Inhalt von home.component.html Datei war immer noch in der root-url/dashboard Seite.

Wenn ich setzte <router-outlet></router-outlet> in Anfang der home.component.html Datei dann nach Armaturenbrett klicken dashboard.component.html Inhalt zeigt zunächst, zeigt dann home.componet.html Inhalte. Wenn ich <router-outlet></router-outlet> im unteren Bereich der home.component.html Datei dann nach dem Klicken auf Dashboard home.component.html Inhalt zeigt zuerst, dann zeigt dashboard.componet.html Inhalt.

Was ich will ist, klicken Sie auf den dashboard Link zeigt nur Dashboard Inhalte. Wie soll ich das machen? Da ich ein Neuling bin, kann ich das alleine nicht herausfinden.

Answer 1

sollten Sie <router-outlet> in app.component

setzen Demo Arbeits: https://plnkr.co/edit/hXJ6ZRv81kt4rvWhxoBD?p=preview

import { provideRouter, ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router'; 
import { DashboardComponent } from './app/dashboard/dashboard.component'; 


const routes: RouterConfig = [ 

    { path: '', redirectTo: 'home', terminal: true }, 
    { path: 'home', component: HomeComponent}, 
    { path: 'dashboard', component: DashboardCompnent} 

]; 

bootstrap(AppComponent, provideRouter(routes)); 

und in home.component

import { Router} from '@angular/router'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

<a href="javascript:void(0)" class="page-scroll" (click)="redirect()">Dashboard</a> 


constructor(private router: Router) {} 
redirect() 
{ 
    this.router.navigate(['/dashboard']); 
}