对angular4子路由&辅助路由详解


Posted in Javascript onOctober 09, 2018

子路由学习笔记:

子路由和路由一样的配置方法,都是声明好路由的入口,路由的路径,路由的出口,不一样的是自路由是嵌套在副路由里面的并且由children表明这是子路由且可以无限循环嵌套。

路由入口:需要注意的是在子路由的入口处不能再用/来跟路径名,/会告诉angular去找跟组件,就会找到跟组件对应的模块,子路由需要用./

1.设置根路由入口:在模板(html)上设置,路由入口就是点击哪里开始路由到新组件(点击首页到首页去)

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>
<a [routerLink]="['/home',2]">主页</a>

子路由入口:(子路由是./)字路由是路由里面套的路由可以无限嵌套。

<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">商品描述</a>

路由出口(路由出口是指新的组件将在哪里显示。入口指定什么时候加载新组件,出口指加载完的组件显示在哪里):路由的出口和入口均在模板里面设置

<router-outlet></router-outlet>

路由路径:当路由的出口入口都设置好了的时候就来配置路由的路径。路径指定了当访问哪条路径的时候加载哪个模板

const routes:Routes=[
 {path:'',redirectTo:'/home',pathMatch:'full'},
 {path:'product',component:ProductComponent,children:[
 {path:'',component:ProductdescComponent} ,
 {path:'seller/:id',component:SellerComponent}
 ]},
 {path:'home/:id',component:HomeComponent},//整个路径被划分成两段变量,一段是路径,一段时参数
 {path:'**',component:Code404Component}//通配符,当路径找不到的时候访问
];

辅助路由:

分三步:

1.在主路由的插座也就是出口处定义一个辅助路由插座:也就是定义个辅助路由的出口:辅助路由的出口定义和主路由一样,只是辅助路由比主路由多了一个name属性:用来指定辅助路由显示那几个组件

这里指辅助路由显示outlet叫做aux对应的组件

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

2.配置辅助路由路径:必须加一个outlet属性,指定该路由显示在名字叫什么的辅助路由出口(插座)上;

这里指当访问chat时加载XchatComponnet显示在名字叫aux的这个辅助路由出处。

{path:'chat',component:XhatComponent,outlet:'aux'},

3.配置入口参数:辅助路由的参数将是一个对象,这个对象里面有一个属性outlets,这个属性的值也是一个对象,该对象里面传一个name属性指定要显示的辅助路由的名字,值是该辅助路由需要显示的组件路径;比如下面:名字叫aux的辅助路由将显示路径为chat的组件

需要注意的是当不希望辅助路由显示的时候可以吧name设置为null。

这里指点击开始聊天的时候加载路径为chat对应的组件,显示在名字叫做aux的辅助路由出口上。

<a [routerLink]="[{outlets:{aux:'chat'}}]">开始聊天</a>
<a [routerLink]="[{outlets:{aux:null}}]">结束聊天</a>

当希望跳转辅助路由的同时主路由跳转到指定的组件的时候:可以在入口文件加一个属性:primary,属性的值是需要跳转的主组件的路由路径例如下面点击聊天的同时不管目前在哪个组件下主路由都会跳转回home路径下的组件

<a [routerLink]="[{outlets:{primary:home, aux:'chat'}}]">开始聊天</a>

以上这篇对angular4子路由&辅助路由详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
javascript中 try catch用法
Aug 16 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 #Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 #Javascript
angularJS1 url中携带参数的获取方法
Oct 09 #Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 #Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 #Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 #Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 #Javascript
You might like
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
jQuery 白痴级入门教程
2009/11/11 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Java语言程序设计测试题判断题部分
2013/01/06 面试题
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
2014年售票员工作总结
2014/11/19 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
阿里云日志过滤器配置日志服务
2022/04/09 Servers