为什么 Angular 2 渲染应用程序组件模板两次
Why does Angular 2 render app component template twice
我想在整个应用程序中显示通用的页眉和页脚。但是当我尝试这样做时,它会显示两次 :-
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
上次我通过为页眉和页脚创建组件解决了这个问题。我知道如果我这样做会有效,但我想了解为什么这是错误的....
因为App组件是你的应用程序的根组件,它一直都在那里,也是显示的组件,在这个根组件内部,由路由器出口,用于'home'路径。所以你说的是路由器在应用程序组件内部显示应用程序组件。
创建一个真实的、不同的主页组件。不要重复使用主页的根组件。
在将 Angular 组件转换为 Web 组件的上下文中,我发生了以下情况(如果您或其他读者可以通过此特定用例感到认同):
Angular 组件呈现两次的另一个原因是您可能将该组件注册为 web 组件(使用 @angular/elements
包),并且,同时,您使用的组件与 angular 组件相同。
例如,如果您在另一个 angular 组件(例如 <complex-title>
)中使用了一个 angular 组件(例如 <simple-title>
),并且您还将第一个组件注册为 Web 组件(例如 createCustomElement(<simple-title>)
),然后第二个组件(<complex-title>
)可以将 angular 版本和组件的 Web 组件版本视为有效,然后,渲染两次。
解决方案(在我的例子中)是创建另一个 angular 组件,它可以被两个组件重复使用(例如 <simple-title>
和 <complex-title>
使用的 <title-renderer>
).
我想在整个应用程序中显示通用的页眉和页脚。但是当我尝试这样做时,它会显示两次 :-
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
上次我通过为页眉和页脚创建组件解决了这个问题。我知道如果我这样做会有效,但我想了解为什么这是错误的....
因为App组件是你的应用程序的根组件,它一直都在那里,也是显示的组件,在这个根组件内部,由路由器出口,用于'home'路径。所以你说的是路由器在应用程序组件内部显示应用程序组件。
创建一个真实的、不同的主页组件。不要重复使用主页的根组件。
在将 Angular 组件转换为 Web 组件的上下文中,我发生了以下情况(如果您或其他读者可以通过此特定用例感到认同):
Angular 组件呈现两次的另一个原因是您可能将该组件注册为 web 组件(使用 @angular/elements
包),并且,同时,您使用的组件与 angular 组件相同。
例如,如果您在另一个 angular 组件(例如 <complex-title>
)中使用了一个 angular 组件(例如 <simple-title>
),并且您还将第一个组件注册为 Web 组件(例如 createCustomElement(<simple-title>)
),然后第二个组件(<complex-title>
)可以将 angular 版本和组件的 Web 组件版本视为有效,然后,渲染两次。
解决方案(在我的例子中)是创建另一个 angular 组件,它可以被两个组件重复使用(例如 <simple-title>
和 <complex-title>
使用的 <title-renderer>
).