对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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
vue 虚拟DOM的原理
Oct 03 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实现获取域名的方法小结
2014/11/05 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
js replace 全局替换的操作方法
2018/06/12 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
经济学人订阅:The Economist
2018/07/19 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
幸福家庭标语
2014/06/27 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
利用Java连接Hadoop进行编程
2022/06/28 Java/Android