Angular 2中的路由器插座和腳註

我是Angular的新手。我正在創建一個包含兩個部分的應用程序。第一部分將根據路線加載。第二秒將是所有視圖中相同的頁腳。Angular 2中的路由器插座和腳註

的index.html

<body> 
<app-root>Loading...</app-root> 
</body>

APP-routing.module.ts

{ path: '', component: HomeComponent }

app.component.ts

import { Component } from '@angular/core'; 
@Component({ 
moduleId: module.id, 
selector: 'app-root', 
templateUrl: './app.component.html' 
}) 
export class AppComponent { 
}

app.component.html

<router-outlet><router-outlet> 
<app-footer></app-footer>

進口{元器件}從 '@角/芯';

home.component.ts

@Component({ 
selector: 'app-home', 
templateUrl: './home.component.html' 
}) 
export class HomeComponent { }

home.component.html

<div> 
<p>Home page will come here</p> 
</div>

footer.component.ts

import { Component } from '@angular/core'; 

@Component({ 
selector: 'app-footer', 
templateUrl: './footer.component.html' 
}) 

export class FooterComponent {}

只footer.component.html

<p>Footer will come here</p>

屏幕上顯示出這個

頁腳會來到這裏

首頁都會來這裏

我希望路由器 - 首先渲染HomeComponent的插座。然後，應該加載應用程序頁腳組件。但是，它正在以相反的順序呈現。

我能做些什麼才能使它們按正確的順序渲染？

來源

2017-02-21 Amit Saxena

您可以在https://github.com/g7bhatia/stackexample檢查這個唯一的應用程序文件夾內容，並按預期進行打印。

來源

2017-02-21 07:48:28 Gourav

感謝您的迴應，這確實有效，您做了哪些更改？另外，我看到FooterComponent的路徑，是否需要？ –

Great ..總是試圖讓你的組件與給定的命令。命令：ng g component yourComponentName。它會自動更新所有模塊。 – Gourav

好的，OnInit是做什麼的？需要嗎？ –

Angular 2中的路由器插座和腳註

回答

相關問題