【Angular】路由
发布日期:2021-10-01 22:20:19 浏览次数:11 分类:技术文章

本文共 1260 字,大约阅读时间需要 4 分钟。

一、什么是路由

个人理解,路由就是从一个页面跳转到另一个页面。


二、在路由时传递数据

在路由时传递数据有三种方式

  • 一在查询参数中传递数据
/product?id=1&name=2  => ActivatedRoute.queryParams[id]

1.app.component.html 中写一个参数进行传参

这里写图片描述
2.页面展示,点击商品详情,地址栏出现 ?id=1,这就是刚刚我给它传的参。
这里写图片描述
3.product.component.ts 接收传入进来的参数id
这里写图片描述
4.product.component.html
这里写图片描述
5.页面展示,下面显示商品ID为1,在第二步,只是地址栏显示id
这里写图片描述

- 二在路由路径中传递数据

{
path:/product/:id} => /product/1 => ActivatedRoute.Params[id]

- 三在路由配置中传递数据

{path:/product,component:ProductComponent,data:[{isProd:true}]} => ActivatedRoute.data[0][isProd]

三、重定向路由

在用户访问一个特定的地址时,将其重定向到另一个制定的地址。

www.aaa.com => www.aaa.com/productswww.aaa.com/x => www.aaa.com/y  //x——y

四、子路由

{
path:'home',component:HomeComponent}{
path:'home',component:HomeComponent, children:[ { path:'',component:XxxComponent, }, { path:'/yyy' component:YyyComponent } ]}

五、辅助路由

{path: 'xxx',component:XxxComponent,outlet:"aux"}{path: 'yyy',component:YyyComponent,outlet:"aux"}XxxYyy

案例整体思路

在app组件的模板上再定义一个插座来显示聊天慢板
单独开发一个聊天室组件,只显示在新定义的插座上
通过路由参数控制新插座是否显示聊天面板


六、路由守卫

在那些场景下用户可以进入路由及离开路由:

只有当用户已经登录并拥有某些权限时才能进入某些路由。
一个由多个表单组件组成的向导,例如注册流程,用户只有在当前路由的组件中填写了满足需求的信息才可以导航到下一个路由。
当用户未执行保存操作而试图离开当前导航时提醒用户。

路由守卫有三种情况:

CanActivate:处理导航到某路由的情况
CanDeactivate:处理从当前路由离开的情况
Resolve:在路由激活之前获取路由数据


总结

项目中多实践吧!

转载地址:https://blog.csdn.net/j15533415886/article/details/80216632 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:angular4-如何让IE浏览器正常显示页面
下一篇:自学成才—总结

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年03月15日 19时19分24秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

php date 函数用法,php中date()日期时间函数使用方法 2019-04-21
php除法获取整数和余数,PHP除法取整和取余数 2019-04-21
java迷宫路径,Java中的迷宫路径查找器 2019-04-21
php substr cnblog,php中substr用法示例 2019-04-21
php链接怎么截取,PHP 截取网页中的固定种子链接 2019-04-21
iis运行不起来php报500,解决IIS上安装thinkphp6运行报500错误 2019-04-21
php ajax上传图片过大500错误,javascript – JQuery AJAX文件上传错误500 2019-04-21
matlab 图中的legend,matlab中legend加图示命令的使用 2019-04-21
PHP exec xargs 不执行,Linux中的xargs命令及示例 2019-04-21
php 枚举cookie内容,php设置和获取cookie 2019-04-21
oracle 坏块查找,检测oracle数据库坏块的方法 2019-04-21
怎么对oracle 进行重装,重装oracle的方法 2019-04-21
oracle将memory_target改为自动管理方式,Oracle 11g新特性:Memory_target与自动内存管理... 2019-04-21
entlib连接oracle乱码,Connecting Oracle using ODP.NET with Enterprise Library DAAB 2019-04-21
php eol 没有换行,php_eol没有换行怎么办 2019-04-21
oracle sql plan baseline,sql plan baseline使用心得 2019-04-21
oracle历史数据归档工具,济南钢铁利用数据库归档工具提升Oracle数据库应用性能... 2019-04-21
oracle数据对象缓存,oracle优化缓存对象与数据 -电脑资料 2019-04-21
linux系统如何连接wf,Linux下如何通过命令连接wifi 2019-04-21
linux网卡传输数据卡死,linux – 网卡正在接收,但根本没有传输? 2019-04-21