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爲什麼渲染應用程序組件模板兩次

回答

相關問題