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

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组件是应用程序的根组件,它始终存在,并且也是显示的组件,在此根组件内部,由路由器插座显示为"主"路径.所以你说路由器在应用程序组件中显示应用程序组件.

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