Angular 路由⑦要素

cnzt      

http://www.cnblogs.com/zt-blog/p/7919185.html

http://www.cnblogs.com/zt-blog/p/7919185.html

路由⑦要素：

1. 声明 <base herf='' />

以便于路由知道怎么拼接路由path

2. 引入angular的路由模块 RouterModule

RouterModule  -- 路由模块

Router -- 路由器

Route --  路由配置信息， { path: 'crisis-center', component: CrisisListComponent }

Routes --  是一个Route数组

3.1 配置路由信息, appRoutes描述如何进行导航。

　const appRoutes: Routes = [

　　{ path: 'crisis-center', component: CrisisListComponent },    // 这是一个Route

　　{ path: 'hero/:id', component: HeroDetailComponent },  //带参数id的路由， e.g. 'hero/18'

　　 { path: 'heroes', component: HeroListComponent, data: { title: 'Heroes List' } },   //存放路由有关的任何信息（静态只读数据），可被任意激活路由访问。

　　{ path: '', redirectTo: '/heroes', pathMatch: 'full' },     //重定向。pathMatch指定路径匹配规则，full表示剩下的url必须完全匹配path值，prefix表示剩下的url只要以path值开头即可。

　　{ path: '**', component: PageNotFoundComponent }  ];   //**路径是一个通配符,前面都不匹配时选此选项。

　　路由匹配顺序由上至下，按照定义路由的顺序匹配的。

应用庞大时，会专门分出路由模块，多个路由模块引入顺序要注意，每个路由模块也是按照导入的先后顺序插入自己定义的路由。定义了通配符的路由模块一定要放到最后！

---

 

　　Question1： 如何在运行时查看路由器配置？

　　Answer1：预加载技术异步加载模块

　　

　　Question2： 传参的几种方式？

　　Answer2：

　　1. 路由定义时带参数，  { path: 'hero/:id', component: HeroDetailComponent }

　　2. 导航时， 组件中定义：  [RouterLink] = ['/hero', hero.id] // { 15 }  路由器会将这个数组组合成url 'hero/15'

　　　　;foo=foo 这样，分号往后并不属于url的一部分，它们仅仅是作为查询参数存在而已！

　　3. 接参时，通过ActivatedRoute获取：

　　　3.1 导入ActivatedRoute, ParamMap，， 并在构造函数中注入这些服务；

　　    3.2 this.activatedRoute.paramMap 返回所有参数，他是一个可观察对象: 用可观察对象方式获取参数有利于（用不同的参数连续导航到相同组件时）组件的复用！

　　　3.3 paramMap 有四个方法： has(key); get(key); getAll(key); keys();

　　

3.2 配置路由器

　　@NgModule({

　　    imports: [

　　　　RouterModule.forRoot( appRoutes,

　　　　　　{ enableTracing: true } // <-- debugging purposes only //开启此选项后，路由事件会打印到控制台中

　　　　)

　　　　 // other imports here

　　   ] , ......

　　})

　　根模块的路由用forRoot，子模块的路由用forChild

4. 路由出口----宿主视图

　　<router-outlet></router-outlet>  ： 路由控制的视图会根据path显示在这里。

　　　　注意： 可以有多个路由出口，但是无名出口最多只能有一个！！！

　　扩展：

　　1. 命名出口的路由定义方式如下。path 和 component 之外，还指定了 outlet t出口，表示这个路由会显示在名为 popup 的 router-outlet 中。

　　{

　　　　path: 'compose',

　　　　component: ComposeMessageComponent,

　　　　outlet:  'popup'

　　}, ......

　　2. 向命名路由会出口添加内容：   <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>  // 需要在链接参数数组中指定这个命名出口

　　　　　　注意： outlets 的属性对象中，也可以指定多个出口，这里只有一个popup。

　　　浏览器的url会像这样：   "XXX/superheroes(popup:compose)"

　　3. 清空命名路由会出口：     this.router.navigate([ { outlets: { popup: null } }]);   //1. 将名为popup 的 router-outlet 内容清空。2.将url中的(popup:compose)移除。

5. 触发路由导航

5.1 通过a标签/button标签 等可点击的标签触发：

　　<a routerLink="/tabA" routerLinkActive="active">Tab A</a>

　　routerLink -- 指定路径

　　routerLinkActive -- 当前Tab选中时会被加上active class

5.2 通过代码触发：

　　Router.navigate( [ 链接参数数组 ] )

　　链接参数也可以用相对路径，如： this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });

　　　　这里使用了相对路径 '../' , 来返回上一级路由父路由。使用相对路径时必须指定当前的ActivatedRoute对象（例子中的 this.route）来提供参考！！！

6. 路由树 -- 路由状态

路由树 ---- 是一个由ActivatedRoute （一个路由服务）组成的树。

Router服务的属性routerState可以访问当前的RouterState的值。可以由此遍历整个路由树！

7. 路由事件

在一次导航中，Router通过Router.events发布一系列从导航开始到结束的导航事件。

NavigationStart	本事件会在导航开始时触发。
RoutesRecognized	本事件会在路由器解析完URL，并识别出了相应的路由时触发
RouteConfigLoadStart	本事件会在Router对一个路由配置进行惰性加载之前触发。
RouteConfigLoadEnd	本事件会在路由被惰性加载之后触发。
NavigationEnd	本事件会在导航成功结束之后触发。
NavigationCancel	本事件会在导航被取消之后触发。 这可能是因为在导航期间某个路由守卫返回了false。
NavigationError	这个事件会在导航由于意料之外的错误而失败时触发。

路由守卫：

　　 路由守卫通过返回一个boolean值来控制路由器的行为。

　　因为守卫的动作可能是异步的（询问用户，server取数据等），所以守卫可以返回Promise或者Observable对象。

　　守卫接口：

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

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

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

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

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

　　守卫以服务的方式定义，并注入到路由配置中。

　　

---

一些概念：

RouterPutlet -- 路由出口

RouterLink -- 路由连接，值是 字符串 或 链接参数数组

RouterLinkActive -- RouterLink的链接被激活时会被加上此属性指定的 classes，反之移除

ActivatedRoute -- 激活的路由

RouterState -- 可以遍历路由树

路由组件 -- 带有router-outlet的组件