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

-1

我想在我的应用程序中显示常见的页眉和页脚。但是，当我尝试这样做，它就会显示两次： -Angular 2为什么渲染应用程序组件模板两次

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

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

来源

2017-09-12 Stacy J

页眉和页脚组件本身的外观如何？（code） –

我还没有创建页眉和页脚组件...上次我解决这个问题是通过创建页眉和页脚组件。但我不明白为什么这不起作用... –

因为应用程序组件是你的应用程序，这是永远存在的根本组成部分，也是分量在这个根组件的内部，通过路由器插座显示为'主'路径。所以你说的路由器显示应用程序组件内的应用程序组件。

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

来源

2017-09-12 19:36:06

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

回答

相关问题