Angular 2中的多個頭文件

Question

我是angular 2的新手，不確定我是對對還是對。所以請耐心等待。

我的應用程序中有多個標題。我想根據路線顯示不同的標題。我怎樣才能做到這一點 ？

在下面的代碼中，默認頁面會加載Header，Footer和Home Components。我想在路由搜索時加載SearchHeader組件。

const routes: Routes = [ 
{ path: '', component: HomeComponent }, 
{ path: 'Search', component: SearchComponent }, 
{ path: 'SearchHeader', component: SearchHeaderComponent }, 
{ path: 'Header', component: HeaderComponent }, 
{ path: 'Footer', component: FooterComponent }, 
{ path: '', component: HeaderComponent, outlet: 'header' }, 
{ path: '', component: FooterComponent, outlet: 'footer' }, 
{ path: '*', component: PageNotFoundComponent } 
]; 

這是我在Component.ts

配置

@Component({ 
selector: 'my-app', 
template: 
'<router-outlet name="header"></router-outlet> 
<div class="row"><router-outlet></router-outlet></div> 
<router-outlet name="footer"></router-outlet> 
`, 
}) 

Answer 1

創建像

const routes: Routes = [ 
{ path: '', component: DefaultHeaderComponent }, 
{ path: '', component: CustomHeaderComponent }, 
{ path: '*', component: PageNotFoundComponent } 
]; 

一個簡單的路線在你AppComponent簡單地把

<router-outlet></router-outlet> 

在你DefaultHeaderComponent乾脆把

<app-default-header></app-default-header> 
<app-some-component></app-some-component> 
<app-default-footer></app-default-footer> 

在你CustomHeaderComponent

<app-custom-header></app-custom-header> 
<app-some-component></app-some-component> 
<app-custom-footer></app-custom-footer>