Angular 路由⑦要素

╰半橙微兮° 2022-01-05 09:11 331阅读 0赞

**[![返回主页][logo.gif]cnzt][logo.gif_cnzt]**

/images/20211229/cd5055aaddfb4a68afcd52b0e5e805f1.pngp/7919185.html

[/images/20211229/cd5055aaddfb4a68afcd52b0e5e805f1.pngp/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描述如何进行导航。

constappRoutes:[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： 如何在运行时查看路由器配置？**

**A****nswer1**：*预加载*技术异步加载模块

**　　Question2： 传参的几种方式？**

**A****nswer2**：

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

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

**注意：**定义路由参数时，如果像这样： this.router.navigate(\['/heroes',\{  id: heroId, foo:'foo'\}\]); 那么最终浏览器看到的url会像 XXX/heroes;id=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标签 等可点击的标签触发：

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发布一系列从导航开始到结束的导航事件。

<table> 
 <tbody> 
  <tr> 
   <td><code><a href="https://angular.cn/api/router/NavigationStart" rel="nofollow">NavigationStart</a></code></td> 
   <td> <p>本<a href="https://angular.cn/api/router/NavigationStart" rel="nofollow">事件</a>会在导航开始时触发。</p> </td> 
  </tr> 
  <tr> 
   <td><code><a href="https://angular.cn/api/router/RoutesRecognized" rel="nofollow">RoutesRecognized</a></code></td> 
   <td> <p>本<a href="https://angular.cn/api/router/RoutesRecognized" rel="nofollow">事件</a>会在路由器解析完URL，并识别出了相应的路由时触发</p> </td> 
  </tr> 
  <tr> 
   <td><code><a href="https://angular.cn/api/router/RouteConfigLoadStart" rel="nofollow">RouteConfigLoadStart</a></code></td> 
   <td> <p>本<a href="https://angular.cn/api/router/RouteConfigLoadStart" rel="nofollow">事件</a>会在<code><a href="https://angular.cn/api/router/Router" rel="nofollow">Router</a></code>对一个路由配置进行<a href="https://angular.cn/guide/router#asynchronous-routing" rel="nofollow">惰性加载</a>之前触发。</p> </td> 
  </tr> 
  <tr> 
   <td><code><a href="https://angular.cn/api/router/RouteConfigLoadEnd" rel="nofollow">RouteConfigLoadEnd</a></code></td> 
   <td> <p>本<a href="https://angular.cn/api/router/RouteConfigLoadEnd" rel="nofollow">事件</a>会在路由被惰性加载之后触发。</p> </td> 
  </tr> 
  <tr> 
   <td><code><a href="https://angular.cn/api/router/NavigationEnd" rel="nofollow">NavigationEnd</a></code></td> 
   <td> <p>本<a href="https://angular.cn/api/router/NavigationEnd" rel="nofollow">事件</a>会在导航成功结束之后触发。</p> </td> 
  </tr> 
  <tr> 
   <td><code><a href="https://angular.cn/api/router/NavigationCancel" rel="nofollow">NavigationCancel</a></code></td> 
   <td> <p>本<a href="https://angular.cn/api/router/NavigationCancel" rel="nofollow">事件</a>会在导航被取消之后触发。 这可能是因为在导航期间某个<a href="https://angular.cn/guide/router#guards" rel="nofollow">路由守卫</a>返回了<code>false</code>。</p> </td> 
  </tr> 
  <tr> 
   <td><code><a href="https://angular.cn/api/router/NavigationError" rel="nofollow">NavigationError</a></code></td> 
   <td> <p>这个<a href="https://angular.cn/api/router/NavigationError" rel="nofollow">事件</a>会在导航由于意料之外的错误而失败时触发。</p> </td> 
  </tr> 
 </tbody> 
</table>

**路由守卫：**

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

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

守卫接口：

*   *  　　用[`CanActivate`][CanActivate]来处理导航*到*某路由的情况。
     *  　　用[`CanActivateChild`][CanActivateChild]来处理导航*到*某子路由的情况。
     *  　　用[`CanDeactivate`][CanDeactivate]来处理从当前路由*离开*的情况.
     *  　　用[`Resolve`][Resolve]在路由激活*之前*获取路由数据。
     *  　　用[`CanLoad`][CanLoad]来处理*异步*导航到某特性模块的情况。

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

--------------------

一些概念：

RouterPutlet -- 路由出口

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

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

ActivatedRoute -- 激活的路由

RouterState -- 可以遍历路由树

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

转载于:https://www.cnblogs.com/zt-blog/p/7919185.html

[logo.gif]: https://www.cnblogs.com/Skins/custom/images/logo.gif
[logo.gif_cnzt]: /images/20211229/cd5055aaddfb4a68afcd52b0e5e805f1.png
[http_www.cnblogs.com_zt-blog_p_7919185.html]: /images/20211229/cd5055aaddfb4a68afcd52b0e5e805f1.pngp/7919185.html
[RouterModule]: https://angular.cn/api/router/RouterModule
[Routes]: https://angular.cn/api/router/Routes
[ActivatedRoute]: https://angular.cn/api/router/ActivatedRoute
[ParamMap]: https://angular.cn/api/router/ParamMap
[NgModule]: https://angular.cn/api/core/NgModule
[routerLinkActive]: https://angular.cn/api/router/RouterLinkActive
[CanActivate]: https://angular.cn/api/router/CanActivate
[CanActivateChild]: https://angular.cn/api/router/CanActivateChild
[CanDeactivate]: https://angular.cn/api/router/CanDeactivate
[Resolve]: https://angular.cn/api/router/Resolve
[CanLoad]: https://angular.cn/api/router/CanLoad