Angular——Router用法说明

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

• 从路由库中导入 Router

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

• 常见配置

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

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

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

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

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

  • 路由出口:

• 路由链接的激活状态

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

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

• 获取路由参数

  • paramMap

• Snapshot（快照）

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

• 添加路由

  • *.html：
  • *.component.ts: this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！