英雄編輯器（05）-添加路由出口

打開 AppComponent 的模板，把 <app-heroes> 元素替換爲 <router-outlet> 元素。

<h1>{{title}}</h1>

<router-outlet></router-outlet>

<app-messages></app-messages>

AppComponent 的模板不再需要 <app-heroes>，因爲只有當用戶導航到這裏時，才需要顯示 HeroesComponent。

<router-outlet> 會告訴路由器要在哪裏顯示路由的視圖。

能在 AppComponent 中使用 RouterOutlet，是因爲 AppModule 導入了 AppRoutingModule，而 AppRoutingModule 中導出了 RouterModule。 在本教程開始時你運行的那個 ng generate 命令添加了這個導入，是因爲 --module=app 標誌。如果你手動創建 app-routing.module.ts 或使用了 CLI 之外的工具，你就要把 AppRoutingModule 導入到 app.module.ts 中，並且把它添加到 NgModule 的 imports 數組中。