对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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
js 模拟气泡屏保效果代码
Jul 10 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
js实现移动端轮播图效果
Dec 09 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 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代码
2010/02/16 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php调整服务器时间的方法
2015/04/03 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python装饰器代替set get方法实例
2019/12/19 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
python操作toml文件的示例代码
2020/11/27 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
护士的自我鉴定
2014/02/07 职场文书
女生抽烟检讨书
2014/10/05 职场文书
党建工作汇报材料
2014/12/24 职场文书
Django显示可视化图表的实践
2021/05/10 Python