对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解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
node+multer实现图片上传的示例代码
Feb 18 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中取得URL的根域名的代码
2011/03/23 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
Python制作爬虫抓取美女图
2016/01/20 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
python实现装饰器、描述符
2018/02/28 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
使用Python实现分别输出每个数组
2019/12/06 Python
基于python3实现倒叙字符串
2020/02/18 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
品牌宣传方案
2014/03/21 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书