Angular需要知道应用程序的各个部分怎么组合在一起，应用程序需要哪些其他文件和库，这些就是元数据。

元数据在装饰器中，@Component@NgModule注释顶级AppModule类

添加 AppRoutingModule

一个独立的顶级模块中加载和配置路由器，位于 src/app 下的 app-routing.module.ts 文件中

由根模块 AppModule 导入它

ng generate module app-routing --flat --module=app

 Routes配置路由器，从@angular/router库中导入两个符号，

src/app/app-routing.module.ts (v1)import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';@NgModule({exports: [ RouterModule ]
})
export class AppRoutingModule {}

添加路由定义

点击链接或某个URL要显示哪个视图，两个 属性：

• path：一个用于匹配浏览器地址栏中 URL 的字符串。

• component：当导航到此路由时，路由器应该创建哪个组件。

路由数组，其中某个路由只想这个组件。

import { HeroesComponent }      from './heroes/heroes.component';const routes: Routes = [{ path: 'heroes', component: HeroesComponent }
];

RouterModule.forRoot()

初始化路由器，监听浏览器地址变化，调用import数组中的 RouterModule.forRoot() 函数

imports: [ RouterModule.forRoot(routes) ],

添加RouterOutlet（出口）

<router-outlet></router-outlet>

添加路由链接 (routerLink)

<nav><a routerLink="/heroes">Heroes</a>
</nav>

routerLink 是 RouterLink 指令的选择器，它会把用户的点击转换为路由器的导航操作。

添加dashboard（仪表盘）视图

ng generate component dashboard

 

src/app/dashboard/dashboard.component.html<h3>Top Heroes</h3>
<div class="grid grid-pad"><a *ngFor="let hero of heroes" class="col-1-4">
<!--组件的 heroes 数组中的每个条目创建了一个链接 --><div class="module hero"><h4>{{hero.name}}</h4></div></a>
</div>

src/app/dashboard/dashboard.component.ts   import { Component, OnInit } from '@angular/core';import { Hero } from '../hero';import { HeroService } from '../hero.service';@Component({selector: 'app-dashboard',templateUrl: './dashboard.component.html',styleUrls: [ './dashboard.component.css' ]})export class DashboardComponent implements OnInit {heroes: Hero[] = [];//定义了一个 heroes 数组属性constructor(private heroService: HeroService) { }ngOnInit() {this.getHeroes();}getHeroes(): void {
//要显示的英雄的数量缩减为四个this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes.slice(1, 5));}}

添加默认路由

下列路由添加到 AppRoutingModule.Routes 数组中。

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

Add dashboard link to the shell（仪表盘链接添加到壳组件）

<a routerLink="/dashboard">Dashboard</a> <a routerLink="/heroes">Heroes</a>

把一个参数化路由添加到 AppRoutingModule.routes 数组中，它要匹配指向英雄详情视图的路径。

{ path: 'detail/:id', component: HeroDetailComponent },

 src/app/app-routing.module.ts (all routes)

const routes: Routes = [{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },{ path: 'dashboard', component: DashboardComponent },{ path: 'detail/:id', component: HeroDetailComponent },{ path: 'heroes', component: HeroesComponent }
];
// :id 是一个占位符，它表示某个特定hero的 id

src/app/heroes/heroes.component.html (list with onSelect)<ul class="heroes"><li *ngFor="let hero of heroes"[class.selected]="hero === selectedHero"(click)="onSelect(hero)"><span class="badge">{{hero.id}}</span> {{hero.name}}</li>
<!--徽章（<badge>） -->
</ul>

从路由参数中提取 id

ngOnInit(): void {this.getHero();
}getHero(): void {const id = +this.route.snapshot.paramMap.get('id');this.heroService.getHero(id).subscribe(hero => this.hero = hero);
}
/*route.snapshot 是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后。paramMap 是一个从 URL 中提取的路由参数值的字典。 "id" 对应的值就是要获取的英雄的 id。
*/

• (+) 操作符会把字符串转换成数字，英雄的 id 就是数字类型。

src/app/hero.service.ts (getHero)getHero(id: number): Observable<Hero> {// TODO: send the message _after_ fetching the herothis.messageService.add(`HeroService: fetched hero id=${id}`);return of(HEROES.find(hero => hero.id === id));
}

注意，反引号 ( ` ) 用于定义 JavaScript 的 模板字符串字面量，以便嵌入 id。