Angular——Router用法说明

总结一下项目使用Router的一些方法：

• 从路由库中导入 Router

  • import { RouterModule, Routes } from '@angular/router';

• 常见配置

  • 每个 Route 都会把一个 URL 的 path 映射到一个组件。 注意，path 不能以斜杠（/）开头。 路由器会为解析和构建最终的 URL，这样当你在应用的多个视图之间导航时，可以任意使用相对路径和绝对路径。

  • 第二个路由中的 :id 是一个路由参数的令牌(Token)。

  • 第三个路由中的 data 属性用来存放于每个具体路由有关的任意信息。

  • 第四个路由中的空路径（''）表示应用的默认路径，当 URL 为空时就会访问那里，因此它通常会作为起点。

  • 最后一个路由中的 ** 路径是一个通配符。当所请求的 URL 不匹配前面定义的路由表中的任何路径时，路由器就会选择此路由。 这个特性可用于显示“404 - Not Found”页，或自动重定向到其它路由。

  • 路由出口: <router-outlet></router-outlet>

• 路由链接的激活状态

  在导航时的每个生命周期成功完成时，路由器会构建出一个 ActivatedRoute 组成的树，它表示路由器的当前状态。

  RouterState 中的每个 ActivatedRoute 都提供了从任意激活路由开始向上或向下遍历路由树的一种方式，以获得关于父、子、兄弟路由的信息。

• 获取路由参数

  • paramMap

• Snapshot（快照）

  let id = this.route.snapshot.paramMap.get('id'); //route.snapshot 提供了路由参数的初始值。

• 添加路由

  • *.html：<a routerLink="/me/123456">
  • *.component.ts: this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

转载于:https://juejin.im/post/5c9439e4f265da60cb3772a3