对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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
JSON对象转化为字符串详解
Aug 11 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
redux处理异步action解决方案
Mar 22 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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一些错误处理的方法与技巧总结
2013/08/10 PHP
php购物车实现方法
2015/01/03 PHP
PHP内置加密函数详解
2016/11/20 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python基于socket函数实现端口扫描
2020/05/28 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
校三好学生主要事迹
2014/01/11 职场文书
领导干部培训感言
2014/01/23 职场文书
岗位竞聘书范文
2014/03/31 职场文书
保护动物的标语
2014/06/11 职场文书
给校长的一封检讨书
2014/09/20 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
Python实现日志实时监测的示例详解
2022/04/06 Python