19

我想在整个应用程序中显示通用页眉和页脚。但是当我尝试这样做时，它会显示两次：-

app.component.html

<header>
    Header
</header>
<router-outlet></router-outlet>
<footer>
    Footer
</footer>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.module.ts

RouterModule.forRoot([
  {path: 'home', component: AppComponent},
  {path: '*', redirectTo: 'home', pathMatch: 'full'},
  {path: '**', redirectTo: 'home', pathMatch: 'full'}
])

结果

Header
Header
Footer
Footer

上次我通过为页眉和页脚创建组件来解决这个问题。我知道如果我这样做会起作用，但我想了解为什么这是错误的......

4

2 回答 2

39

因为 App 组件是您的应用程序的根组件，它始终存在，并且也是在此根组件内由路由器出口显示的组件，用于“主”路径。所以你说路由器在应用程序组件内显示应用程序组件。

创建一个真实的、不同的家庭组件。不要为您的主页重用根组件。

于 2017-09-12T19:36:06.353 回答
0

在将 Angular 组件转换为 Web 组件的上下文中，以下发生在我身上（如果您或其他读者可以感觉到被这个特定用例所识别）：

Angular 组件渲染两次的另一个原因是您可能正在将该组件注册为Web 组件（使用@angular/elements包），同时您使用的是与 Angular 组件相同的组件。

例如，如果您<simple-title>在另一个 Angular 组件（例如 ）中使用了一个 Angular 组件（例如<complex-title>），并且您还将第一个组件注册为 Web 组件（例如createCustomElement(<simple-title>)），那么第二个组件（<complex-title>）可以采用 Angular 版本并且组件的 Web 组件版本有效，然后渲染两次。

解决方案（在我的情况下）是创建另一个可以被两个组件重用的角度组件（例如<title-renderer>，由<simple-title>and使用<complex-title>）。

于 2020-01-16T00:28:14.287 回答