发表于: 2020-07-24 21:03:57

1 2460


一,今天完成的事情

把任务6-10中的路由添加守卫,

路由守卫的意义与用途:

  • 该用户可能无权导航到目标组件。

  • 可能用户得先登录(认证)。

  • 在显示目标组件前,你可能得先获取某些数据。

  • 在离开组件前,你可能要先保存修改。

  • 你可能要询问用户:你是否要放弃本次更改,而不用保存它们?

你可以往路由配置中添加守卫,来处理这些场景。

守卫返回一个值,以控制路由器的行为:

  • 如果它返回 true,导航过程会继续

  • 如果它返回 false,导航过程就会终止,且用户留在原地。

  • 如果它返回 UrlTree,则取消当前的导航,并且开始导航到返回的这个 UrlTree.

路由器可以支持多种守卫接口:

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

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

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

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

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

管理特性区的文件是这样的:

src/app/admin

admin
admin.component.css
admin.component.html
admin.component.ts
admin-dashboard
admin-dashboard.component.css
admin-dashboard.component.html
admin-dashboard.component.ts
manage-crises
manage-crises.component.css
manage-crises.component.html
manage-crises.component.ts
manage-heroes
manage-heroes.component.css
manage-heroes.component.html
manage-heroes.component.ts
admin.module.ts
admin-routing.module.ts

最初的管理路由配置如下:

把 AdminModule 导入到 app.module.ts 中,并把它加入 imports 数组中来注册这些管理类路由


Resolve: 预先获取组件数据

注意以下三个要点:

  1. 路由器的这个 Resolve 接口是可选的。CrisisDetailResolverService 没有继承自某个基类。

  2. 路由器只要找到了这个方法,就会调用它。

  3. 路由器会在用户可以导航的任何情况下调用该解析器,这样你就不用针对每个用例都编写代码了。

  4. 在任何一个解析器中返回空的 Observable 就会取消导航。


二,明天学习一下react,


返回列表 返回列表
评论

    分享到