angular4 route 总结

angular的route总结

   angular的路由是一个比较重要的部分，相比http,它占的分量更多了，以至于我想总结一下，因为它改变确实挺大的，引入了许多的新概念。它可以处理很多验证权限和预加载方面的问题，说白了就是把以前出现的加载性能问题，都很好的处理了，把以前的解决方案，给封装好了。

  一、基本的东西

   1、在index.html引入<basehref="/">，

2、引入route模块import{RouteModule ,Routes} from '@angular/route'

3、路由表routes的配置 route :Route=[{path:'admin',component: 组件}] 把配置好的路由表传给RouterModule.forRoot()方法并传给本模块的imports数组就可以配置路由器,我的理解就是把路由表放入的routermodule模块中，其中需要注意的是根路由，与特性模块的路由加入方法不一样，特性模块加入方法为forchild()。要看路由的声明周期的钩子（我的理解初次看到钩子的概念）imports: [ RouterModule.forRoot(appRoutes, { enableTracing: true } ) ], 加个enableTracing参数。

 二、激活的路由

       通过activatedRoute的路由服务我们可以获得一些数据，比如路径参数,还是直接看它的属性吧：

      data               一个Observable，其中包含提供给路由的data对象。也包含由解析守卫（resolve guard）解析而来的值。
      paramMap        一个Observable，其中包含一个由当前路由的必要参数和可选参数组成的map对象。用这个map可以获取来自同名参数的单一值或多重值。
     queryParamMap 一个Observable，其中包含一个对所有路由都有效的查询参数组成的map对象。 用这个map可以获取来自查询参数的单一值或多重值。
     fragment       片段
     outlet                要把该路由渲染到的RouterOutlet的名字。对于无名路由，它的路由名是primary，而不是空串。
    routeConfig     用于该路由的路由配置信息，其中包含原始路径。
    parent               当该路由是一个子路由时，表示该路由的父级ActivatedRoute。
    firstChild       包含该路由的子路由列表中的第一个ActivatedRoute。
    children             包含当前路由下所有已激活的子路由。

其中params被paraMap替代，queryparams被queryparammap 替代

三、特性模块的路由

    这里是我比较注意的地方，当由以前的一个根模块统领所有的组件，路由可以写一起，现在分了子模块，子模块也管理了相应的组件，就有必要把路由分出来了，我们可以通过定义一个路由模块将路由分出来，便于管理。

   我要给自己提几个注意的地方：

  1.模块下需要写管理的组件，路由模块也要写相应的组件，本以为路由模块上引入的组件，在模块上就不需要引入了，发现模块的组件会出现不在module中，后来在模块上加了模块的组件，就不会出错，意味着其他可以在模块上不写，但是模块的组件要再次import.

  2.分路由了，不同特性区的组件就可以在根模块删除了，原文写的：

  由特性模块提供的路由会被路由器再组合上它们所导入的模块的路由。 这让我们可以继续定义特性路由模块中的路由，而不用修改主路由配置。
  但我们显然不会想把同一个路由定义两次，那就移除HeroListComponent的导入和来自app-routing.module.ts中的/heroes路由。

 3.惰性加载模块

    这里先提惰性加载，因为它在模块上有个很大的变化，本来特性模块需要被引入根模块中，按我理解通过这根线来牵引，在初次解析的时候，根据这线来展开页面树的布局，

   现在有了惰性加载，特性模块可以去除，通过路由来激活惰性模块的加载。

   原文：

      惰性加载路由配置
           1、  把admin-routing.module.ts中的admin路径从'admin'改为空路径''。
            Router支持空路径路由，可以使用它们来分组路由，而不用往URL中添加额外的路径片段。 用户仍旧访问/admin，并且AdminComponent仍然作为用来包含子路由的路   由组件。
           2、打开AppRoutingModule，并把一个新的admin路由添加到它的appRoutes数组中。
               给它一个loadChildren属性（注意不是children属性），把它设置为AdminModule的地址。 该地址是AdminModule的文件路径（相对于app目录的），加上一个#分隔                 符，再加上导出模块的类名AdminModule。
             app-routing.module.ts (load children)
            content_copy
           { path: 'admin',
             loadChildren: 'app/admin/admin.module#AdminModule',}, // 
         当路由器导航到这个路由时，它会用loadChildren字符串来动态加载AdminModule，然后把AdminModule添加到当前的路由配置中， 最后，它把所请求的路由加载到目标         admin组件中。
      3、最后一步是把管理特性区从主应用中完全分离开。 根模块AppModule既不能加载也不能引用AdminModule及其文件。
       在app.module.ts中，从顶部移除AdminModule的导入语句，并且从Angular模块的imports数组中移除AdminModule。 

   

  4.  路由模块引入相应的模块，在把模块引入根模块中（除了惰性加载），引入顺序很重要，路由器会依旧顺序查找路由表，所以把重定向和全匹配的放最后。

 四、杂项

   1.{ enableTracing: true }  观察路径变化的周期

   2.routerlinkactive='active'  当前激活的路由的样式

   3.[routerLinkActiveOptions]={exact: true}   使用了{ exact: true }，那么只有在其URL与当前URL精确匹配时才会激活指定的RouterLink，防止父子路由都可能同时激活。

   4.获取参数 

      this.route.paramMap.switchMap / subscribe((params: ParamMap) =>this.service.getHero(params.get('id')));

     ParamMap 参数 API
    has(name) 如果参数名位于参数列表中，就返回 true 。

     get(name) 如果这个map中有参数名对应的参数值（字符串），就返回它，否则返回null。如果参数值实际上是一个数组，就返回它的第一个元素。
    getAll(name) 如果这个map中有参数名对应的值，就返回一个字符串数组，否则返回空数组。当一个参数名可能对应多个值的时候，请使用getAll。
      keys               返回这个map中的所有参数名组成的字符串数组。

  

  参数的可观察对象（Observable）与组件复用  与    Snapshot（快照）：当不需要Observable时的替代品 组件不复用时

    ngOnInit对每个实例只调用一次。 我们需要一种方式来检测在同一个实例中路由参数什么时候发生了变化。 而params属性这个可观察对象（Observable）干净漂亮的处理      了    这种情况。 这样就可以复用组件了

  5. this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }])          this.router.navigate([{ outlets: { popup: null }}]);清除第二路由的内容    

查询参数及片段 可以作为令牌 所以路由都可用 引入 NavigationExtras对象

this.router.navigate(['/login'], navigationExtras); 

五、

 const crisisCenterRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

这种写法的注意，当使用childen是 必须通过相应的模块组件上的路由出口

对这些路由的处理中有一些重要的不同。

原文：路由器会把这些路由对应的组件放在CrisisCenterComponent的RouterOutlet中，而不是AppComponent壳组件中的。

意思说一个路由一个组件下，在哪个组件下激活就在这组件上输出，这种就不可以任意地方输出模板了。

六 、路由守卫关键的地方

   用CanActivate来处理导航到某路由的情况。

    应用程序通常会根据访问者来决定是否授予某个特性区的访问权。 我们可以只对已认证过的用户或具有特定角色的用户授予访问权，还可以阻止或限制用户访问权，直到用     户账户激活为止。

    无组件的路由就能让我们轻松的守卫子路由

   用CanActivateChild来处理导航到某子路由的情况。

   用CanDeactivate来处理从当前路由离开的情况.

       处理未保存的更改，当一些处理没完成，就离开时。

    用Resolve在路由激活之前获取路由数据。

       预先获取数据，如果没有就重定向

     用CanLoad来处理异步导航到某特性模块的情况

      有权限的用户才会被加载,性能上的优化

 七、预加载：特性区的后台加载    (必须为惰性模块)

      Router内置了两种预加载策略：
       完全不预加载，这是默认值。惰性加载的特性区仍然会按需加载。
     预加载所有惰性加载的特性区。
     默认情况下，路由器或者完全不预加载或者预加载每个惰性加载模块。 路由器还支持自定义预加载策略，以便完全控制要预加载哪些模块以及何时加载。

     RouterModule.forRoot(
  appRoutes,
  {
    enableTracing: true, // <-- debugging purposes only
    preloadingStrategy: PreloadAllModules
  }
)

这会让Router预加载器立即加载所有惰性加载路由（带loadChildren属性的路由）canload 会阻塞它的优先级高

自动义预加载data:{preload:true}

 短短的总结了一下，发现官网里还有好多东西藏着需要细细的看。