新需求：
添加一个仪表盘视图。
添加在英雄列表和仪表盘视图之间导航的能力。
无论在哪个视图中点击一个英雄，都会导航到该英雄的详情页。
在邮件中点击一个深链接，会直接打开一个特定英雄的详情视图。
添加 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 ]
网友评论