Wie Teilansicht mit mehreren Steckdose in Angular2

Question

render Ich bin Anfänger in Angular2, und wollen einfache CRUD-Operation mit Routing-Konzept erstellen. Ich benutze Visual Studio 2015, also sind alle Konfigurationen bereits für mich verfügbar. Ich mag wie unten Bildschirm einen Blick in bestehenden Ansicht öffnen,

holt shouls Beitrag Ansicht unten Bereich macht in (Teil Inhaltsbereich),

Mein Modul,

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 
import { AppComponent } from './components/app/app.component' 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; 
import { CounterComponent } from './components/counter/counter.component'; 
import { FetchDataGetComponent } from './components/fetchdata/fetchdata.get.component' 
import { FetchDataPostComponent } from './components/fetchdata/fetchdata.post.component' 

@NgModule({ 
    bootstrap: [AppComponent], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     CounterComponent, 
     FetchDataComponent, 
     HomeComponent, 
     FetchDataGetComponent, 
     FetchDataPostComponent 
    ], 
    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'counter', component: CounterComponent }, 
      { path: 'data', component: FetchDataComponent }, 
      { path: 'data/get', component: FetchDataGetComponent, outlet: 'datachild' }, 
      { path: 'data/post', component: FetchDataPostComponent, outlet:'datachild' }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ] 
}) 
export class AppModule { 
} 

App.component.html,

<div class='container-fluid'> 
    <div class='row'> 
     <div class='col-sm-3'> 
      <nav-menu></nav-menu> 
     </div> 
     <div class='col-sm-9 body-content'> 
      <router-outlet></router-outlet> 
      <router-outlet name='datachild'></router-outlet> 
     </div> 
    </div> 
</div> 

fetchdata.component.html

<div class='navbar-collapse collapse'> 
    <ul class='nav navbar-nav'> 
     <li [routerLinkActive]="['link-active']"> 
      <a [routerLink]="['/data/get']"> 
       <span class='glyphicon glyphicon-home'></span> GET 
      </a> 
     </li> 
     <li [routerLinkActive]="['link-active']"> 
      <a [routerLink]="['/data/post']"> 
       <span class='glyphicon glyphicon-education'></span> POST 
      </a> 
     </li> 
     <li [routerLinkActive]="['link-active']"> 
      <a [routerLink]="['/databyid']"> 
       <span class='glyphicon glyphicon-th-list'></span> Fetch data by id 
      </a> 
     </li> 
    </ul> 
</div> 
<div> 
    <h1>Partial content area</h1> 
</div> 

I Ausgang Funktion bin mit meinen Dinge zu tun, aber kein Glück, Links (Heim, Zähler ...) arbeiten, aber GET, POST arbeitet nicht, Wo Muss ich ändern, damit es funktioniert?

Answer 1

Siehe routerlink hat '/ data/get', während in Routing-Datei 'Data/get'. Entfernen Sie den ersten Schrägstrich von '/ data/get'