对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 相关文章推荐
jquery表单验证使用插件formValidator
Nov 10 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
jQuery插件之validation插件
Mar 29 jQuery
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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下将XML转换为数组
2010/01/01 PHP
php简单日历函数
2015/10/28 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
js实现拖拽效果
2015/02/12 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
jquery获取节点名称
2015/04/26 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
Python字符串和字典相关操作的实例详解
2017/09/23 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python实现浪漫的烟花秀
2019/01/30 Python
Django框架模板用法入门教程
2019/11/04 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
迟到检讨书1000字
2014/01/15 职场文书
应届护士求职信范文
2014/01/26 职场文书
初中家长寄语
2014/04/02 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
二手车转让协议书
2015/01/29 职场文书
计划生育个人总结
2015/03/02 职场文书
个人党性锻炼总结
2015/03/05 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书