新需求：
添加一個儀表盤視圖。
添加在英雄列表和儀表盤視圖之間導航的能力。
無論在哪個視圖中點擊一個英雄，都會導航到該英雄的詳情頁。
在郵件中點擊一個深鏈接，會直接打開一個特定英雄的詳情視圖。
添加 AppRoutingModule
在 Angular 中，最好在一個獨立的頂層模塊中加載和配置路由器，它專注於路由功能，然後由根模塊 AppModule 導入它。
按照慣例，這個模塊類的名字叫做 AppRoutingModule，並且位於 src/app 下的 app-routing.module.ts 文件中。
使用 CLI 生成它。
ng generate module app-routing --flat --module=app
--flat 把這個文件放進了 src/app 中，而不是單獨的目錄中。
--module=app 告訴 CLI 把它註冊到 AppModule 的 imports 數組中。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }
替換
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
const routes: Routes = [
{ path: 'heroes', component: HeroesComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
首先，AppRoutingModule 會導入 RouterModule 和 Routes，以便該應用具有路由功能。配置好路由後，接着導入 HeroesComponent，它將告訴路由器要去什麼地方。
注意，對 CommonModule 的引用和 declarations 數組不是必要的，因此它們不再是 AppRoutingModule 的一部分。以下各節將詳細介紹 AppRoutingModule 的其餘部分。
路由
該文件的下一部分是你的路由配置。 Routes 告訴路由器，當用戶單擊鏈接或將 URL 粘貼進瀏覽器地址欄時要顯示哪個視圖。
由於 AppRoutingModule 已經導入了 HeroesComponent，因此你可以直接在 routes 數組中使用它：
典型的 Angular Route 具有兩個屬性：
path: 用來匹配瀏覽器地址欄中 URL 的字符串。
component: 導航到該路由時，路由器應該創建的組件。
這會告訴路由器把該 URL 與 path：'heroes' 匹配。 如果網址類似於 localhost:4200/heroes 就顯示 HeroesComponent。
RouterModule.forRoot()
@NgModule 元數據會初始化路由器，並開始監聽瀏覽器地址的變化。
下面的代碼行將 RouterModule 添加到 AppRoutingModule 的 imports 數組中，同時通過調用 RouterModule.forRoot() 來用這些 routes 配置它：
這個方法之所以叫 forRoot()，是因爲你要在應用的頂層配置這個路由器。 forRoot() 方法會提供路由所需的服務提供者和指令，還會基於瀏覽器的當前 URL 執行首次導航。
imports: [ RouterModule.forRoot(routes) ],
接下來，AppRoutingModule 導出 RouterModule，以便它在整個應用程序中生效。
exports: [ RouterModule ]