【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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过按个爪印,很不错,赞一个!
[***.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
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
php eol 没有换行,php_eol没有换行怎么办
2019-04-21
oracle数据对象缓存,oracle优化缓存对象与数据 -电脑资料
2019-04-21
linux系统如何连接wf,Linux下如何通过命令连接wifi
2019-04-21
linux网卡传输数据卡死,linux – 网卡正在接收,但根本没有传输?
2019-04-21