Angular 2中的多个标题

Question

我是 Angular 2 的新手，不确定我做对了还是错了。所以，请多多包涵。

我的应用程序中有多个标头。我想根据路由显示不同的标题。我该怎么做？

在下面的代码中，默认页面加载页眉、页脚和主页组件。我想在路由为 Search 时加载 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>