Question

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

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

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

Answer 1

因为App组件是应用程序的根组件，它始终存在，并且也是显示的组件，在此根组件内部，由路由器插座显示，用于“家庭”组件。路径。因此，您要说路由器在应用程序组件中显示应用程序组件。

创建一个真实的，不同的家庭组件。不要在主页上重用根组件。

Answer 2

在将Angular组件转换为Web组件的情况下，发生了以下事情（如果您或其他读者可以通过此特定用例识别）：

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

例如，如果您有一个角度分量（例如<simple-title>）正在另一个角度分量（例如<complex-title>）内部使用，并且您也将第一个分量注册为Web组件（例如{ {1}}），然后第二个组件（createCustomElement(<simple-title>)）可以将组件的角度版本和Web组件版本视为有效，然后渲染两次。

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

为什么Angular 2渲染应用程序组件模板两次

2 个答案: