Angular2의 다중 콘센트로 부분 뷰를 렌더링하는 방법

저는 Angular2로 초보자이며 라우팅 개념으로 간단한 CRUD 작업을 만들고 싶습니다. Visual Studio 2015를 사용하고 있습니다. 따라서 모든 구성을 이미 사용할 수 있습니다. 나는 포스트보기 영역 아래에서 렌더링 shouls하기 화면이 아래와 같이 기존의보기에서 하나의보기,Angular2의 다중 콘센트로 부분 뷰를 렌더링하는 방법

을 열고 자 (일부 내용 영역),

내 모듈,

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 나는 내 일을 콘센트 기능을 사용하고, 그러나 운이, 다른 링크 (홈, 카운터 ...)가 작동하지 않습니다,하지만 GET

<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>

, POST가 작동하지 않습니다, 어디 작동하도록 변경해야합니까?

출처

2017-03-29 Keval Patel

라우터 링크에는 '/ data/get'이 있고 라우팅 파일에는 'data/get'이 있습니다.를 참조하십시오. '/ data/get'에서 첫 번째 슬래시 제거

출처

2017-06-13 22:15:32 nish

Angular2의 다중 콘센트로 부분 뷰를 렌더링하는 방법

답변

관련 문제