对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 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
Vue实现简易计算器
Feb 25 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
工地安全检查制度
2014/02/04 职场文书
小学生寒假家长评语
2014/04/16 职场文书
服务之星事迹材料
2014/05/03 职场文书
家属慰问信
2015/02/14 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
HTML常用标签超详细整理
2022/03/19 HTML / CSS
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python