一. 配置基礎(chǔ)路由

1.確保index.html頂部有<base href="/">

2.讓路由器可用，導(dǎo)入RouterModule并添加到AppModule的imports數(shù)組中。
path: 路由器會(huì)用它來匹配瀏覽器地址欄中的地址;
component: 導(dǎo)航到此路由時(shí)，路由器需要?jiǎng)?chuàng)建的組件

import { RouterModule }   from '@angular/router';

RouterModule.forRoot([
  {
    path: 'heroes',
    component: HeroesComponent
  }
])

3.路由出口(Outlet)
把<router-outlet>標(biāo)簽添加到模板的底部

template: `
   <h1>{{title}}</h1>
   <a routerLink="/heroes">Heroes</a>
   <router-outlet></router-outlet>
 `

二 . 配置帶參數(shù)的路由

1.在module定義路由

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

2.導(dǎo)入語句

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location }                 from '@angular/common';

import { HeroService } from './hero.service';

import 'rxjs/add/operator/switchMap';

3.構(gòu)造函數(shù)，保存私有變量

constructor(
  private heroService:HeroService,
  private route:ActivatedRoute,
  private location: Location
){}

4.實(shí)現(xiàn)OnInit接口

implements OnInit{
  ngOnInit(){
  this.route.paramMap.switchMap((params:ParamMap) => 
  this.heroService.getHero(+params.get('id'))).subscribe(hero => 
  this.hero = hero);
  }
}

5.在hero.service.ts中添加getHero()方法

getHero(id:number):Promise<Hero>{
  return this.getHeroes().then(heroes => heroes.find(hero => hero.id ===id));
}

6.模板跳轉(zhuǎn) routerLink

<a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]" >

三.返回路由

goBack(){
  this.location.back();
}

四.重構(gòu)路由為路由模塊

1.在app-routing.module.ts中import

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
 
const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }
];
 
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

2.修改app.module.ts
原來的

import { RouterModule }  from '@angular/router';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path:'',
        redirectTo:'/dashboard',
        pathMatch:'full'
      },{
        path:"heroes",
        component:HeroesComponent
      },{
        path:"dashboard",
        component:DashboardComponent
      },{
        path:"detail/:id",
        component:HeroDetailComponent
      }
    ])
  ]
})

修改后的

import { AppRoutingModule }     from './app-routing.module';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ]
})