控制视图应用状态的对象

调试阶段,更新组件和路由的时候,需要重新运行,浏览器更新是没有效果的,只有静态页面的更新能够被刷新出来。

路由的5个对象


web前端工程化之路由


Routespath中不加/

web前端工程化之路由

RouterLink

web前端工程化之路由

Router对象

app.component.ts中,通过构造函数创建,然后在事件中调用导航

web前端工程化之路由

web前端工程化之路由

 效果:

    web前端工程化之路由


——————————————————————————————

RouterOutlet

插座,在插座下面显示组件的内容,根据路由配置,将子组件的内容,放在插座所在位置。

web前端工程化之路由


 web前端工程化之路由

 

——————————————————————————————

ActivateRoute

三种传递参数的方法

在查询参数中传递数据

web前端工程化之路由

传入参数:

web前端工程化之路由

web前端工程化之路由

接收参数:

web前端工程化之路由

@Input (Input Decorator):代表是一个输入属性

web前端工程化之路由

 

在查询路径中传递数据

web前端工程化之路由

传入参数:

web前端工程化之路由

 

web前端工程化之路由

 

web前端工程化之路由

web前端工程化之路由

相同的商品详情组件路由到商品详情的时候,ProductComponent不会再次调用构造函数创建ActivitedRoute,那么OnInit方法也不会被再次创建。

解决方法:

Init方法中进行订阅。

web前端工程化之路由

 

在路由配置中传递数据

web前端工程化之路由 

重定向路由

当访问一个路径的时候,可以重新指向一个新的地址

比如访问https://www.baidu.com/home最终访问的仍然是https://www.baidu.com/

 

/home指向空的路径

web前端工程化之路由

效果

web前端工程化之路由

使用空的路径,就能够重定向到home页面中

web前端工程化之路由

 

 

子路由

web前端工程化之路由

子路由是一个数组

web前端工程化之路由

 

传参数

web前端工程化之路由

组件中获得参数

web前端工程化之路由

显示效果:

web前端工程化之路由

 

web前端工程化之路由

 

 

辅助路由

在插座中给一个名字

web前端工程化之路由

在路由中写上插座的名称,这样可以规定在那个插座上显示哪个组件

web前端工程化之路由

上面这两个都在aux插座上显示

 

在总模板html上增加一个带名字的插座

web前端工程化之路由

路由中

web前端工程化之路由

文本框

web前端工程化之路由

css设置样式

web前端工程化之路由

 

web前端工程化之路由

 

 

 

路由守卫

web前端工程化之路由

使用路由守卫---钩子

web前端工程化之路由

只有当用户已经登录并拥有某些权限才能进入某些路由

CanActivate(可运行)

web前端工程化之路由

 

web前端工程化之路由

 

web前端工程化之路由

一个由多个表单组件的向导,例如注册流程,用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由

CanDeactivate:(可禁用)

web前端工程化之路由

 

web前端工程化之路由

 

web前端工程化之路由

 

当用户未执行保存操作而试图离开当前导航时提醒用户

Resolve:例如:页面修改,在组件中发出http请求,中间有时间差,模板会延迟加载,使用resolve,在进入路由前就读完数据,然后带着数据进入,这样数据不会有延迟加载

 

web前端工程化之路由


最后画了一个路由配置的流程图,个人理解,可能有误,希望多多指教

web前端工程化之路由

相关文章:

  • 2022-12-23
  • 2021-06-29
  • 2022-01-01
  • 2021-11-20
  • 2021-07-19
  • 2022-12-23
  • 2022-12-23
  • 2021-08-29
猜你喜欢
  • 2021-09-20
  • 2021-05-20
  • 2021-06-26
  • 2021-05-22
  • 2021-12-04
  • 2021-12-19
相关资源
相似解决方案