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

创建一个简单的路线，如

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>

Angular 2中的多个标题

1 个答案: