角2の複数のヘッダー

Question

私は角度2の新機能であり、正しいか間違っているかわからない。だから、私と一緒にいてください。

私のアプリケーションには複数のヘッダがあります。私はルートに基づいて別のヘッダーを表示したい。これどうやってするの ？

以下のコードでは、デフォルトでページにヘッダー、フッター、およびホームコンポーネントが読み込まれます。ルートが検索のときに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

はあなたではAppComponentを

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

のような単純なルートを作成しているだけで、あなたに

<router-outlet></router-outlet> 

を置くDefaultHeaderComponentは単に、あなたがブラウザのタイトルを意味するヘッダすることによって、あなたCustomHeaderComponent

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