[入门级]angular4学习笔记06

关于路由器

• 路由器就是从一个视图导航到另一个视图的机制
• Angular路由器是一个可选的外部Angular NgModule, 名叫RouterModule
• 路由器包含多种服务（RouterModule）、多种指令（RouterOutlet,RouterLink,RouterLinkActive）、和一套配置（Routes）
• 基地址是必须的（base href）

index.html

  
  ...

一个简单的路由器配置

import { RouterModule } from @angular/router;

@NgModule({
  imports:[
    RouterModule.forRoot([
      {
        path:heroes,
        component:heroesComponent
      }
    ])
  ]
})

路由定义包括的内容

• path:路由器会用它来匹配浏览器地址栏中的地址
• component:导航到此路由时，路由器需要创建的组件

解析：这里使用的是forRoot()，因为我们是在应用 根部 提供配置好的路由器，forRoot()方法提供了路由需要的路由服务提供商和指令，并基于当前浏览器URL初始化导航

路由出口（Outlet）

• 我们把路径/heroes粘贴到浏览器的地址栏，路由器会匹配到'heroes'路由，并显示HeroesComponent组件，我们必须告诉路由它位置，所以我们把标签添加到模版的底部
• RouterOutlet是由RouterModule提供的指令之一，当我们在应用中导航时，路由器就把激活的组件显示在里面

routerLink

app.component.html

routerLink
  Heroes

解析：

• 我们把RouterLink指令（ROUTER_DIRECTIVES中的另一个指令）绑定到一个字符串，它将告诉路由器，当用户点击链接时，应该导航到哪里
• 由于这个链接不是动态的，我们只要用 一次性绑定 的方式绑定到路由的路径就可以了

路由器重定向

• 浏览器启动时地址栏中的地址是／，当应用启动时，它应该显示仪表盘，并且在浏览器地址栏中显示URL:/Dashboard

我们可以用重定向来实现它

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

pathMatch的值

• full （完全匹配）剩下的未匹配的部分必须等于path时
• prefix （匹配开头）剩下的URL以这个跳转路由中的prefix值开头时，就会匹配上这个跳转路由

共享HeroService服务

把HeroService添加到AppModule中的providers数组中，这样就创建了一个HeroService的单例对象，应用中的所有组件都可以使用它

配置带参数的路由

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

解析：路径中的冒号（:）表示 :id 是一个占位符，当导航到这个HeroDetailComponent组件时，它将被填入一个特定英雄的id

HeroDetailComponent
在ngOnInit生命周期钩子中,应该从ActivatedRouter服务的可观察对象params中取得id参数，并通过HeroService服务获取具有这个指定id的英雄数据

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

注意：switchMap运算符如何将可观察的路由参数中的id映射到一个新的Observable,即HeroService.getHero()方法的结果
如果用户在getHero请求执行的过程中再次导航到这个组件，switchMap再次调用HeroService.getHero()方法之前，会取消之前的请求
英雄id是数字，而路由参数的值总是字符串，所以，我们需要通过Javascript中的（＋）操作法把路由参数的值转成数字

goBack

使用之前注入的Location服务，利用浏览器的历史堆栈，导航到上一步

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

公众号：前端咖秀