6.路由

一. 配置基础路由

1.确保index.html顶部有<base href="/">

2.让路由器可用，导入RouterModule并添加到AppModule的imports数组中。
path: 路由器会用它来匹配浏览器地址栏中的地址;
component: 导航到此路由时，路由器需要创建的组件

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

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

3.路由出口(Outlet)
把<router-outlet>标签添加到模板的底部

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

二 . 配置带参数的路由

1.在module定义路由

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

2.导入语句

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.构造函数，保存私有变量

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

4.实现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.模板跳转 routerLink

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

三.返回路由

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

四.重构路由为路由模块

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
  ]
})