子路由是相对路由

路由配置部分:

主要是children

const routes: Routes = [
{path:'home', component: HomeComponent,
  children:[
    {
    path:'homeDetail/:id',
    component:HomeMenuComponent
    },{
    path:'',
    component:HomeListComponent
    }
  ]
]
第一种是通过标签跳转
这里是./(相对路径)不是/(绝对路径)
 
<a [routerLink] = "['./homeDetail',10]">haha</a>
第二种是点击按钮通过Router路由子界面
 
import { Router,ActivatedRoute } from "@angular/router";
 
constructor(private router: Router,private routeInfo:ActivatedRoute){}
 
 
 
nav():void {
this.router.navigate(['homeDetail',100],{relativeTo:this.routeInfo});
}
 

angular路由详解四(子路由)的更多相关文章

  1. angular路由详解:

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  2. angular路由详解六(路由守卫)

    路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...

  3. angular路由详解一(基础知识)

    本人原来是iOS开发,没想到工作后,离iOS开发原来越远,走上了前端的坑.一路走来,也没有向别人一样遇到一个技术上的师傅,无奈只能一个人苦苦摸索.如今又开始填angular的坑了.闲话不扯了.(本人学 ...

  4. react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 6.vue如何在路由里面定义一个子路由? 给父路由加一个 children:[] 参考我 ...

  5. angular路由详解五(辅助路由)

    在HTML文件中 //主路由 <router-outlet></router-outlet> //辅助路由 <router-outlet  name="aux& ...

  6. angular路由详解三(路由参数传递)

    我们经常用路由传递参数,路由主要有三种方式: 第一种:在查询参数中传递数据 {path:"address/:id"}   => address/1  => Activa ...

  7. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  8. Ocelot简易教程(三)之主要特性及路由详解

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...

  9. pika详解(四) channel 通道

    pika详解(四) channel 通道   本文链接:https://blog.csdn.net/comprel/article/details/94662394 版权 ​ channel通道 通道 ...

随机推荐

  1. javascript selenium全套教程发布

    为什么有这个系列 目前javascript生态非常丰富,越来越多的人开始用js去做前端的ui测试了.而selenium是web ui测试的标准解决方案,所以一套js的selenium教程是很有必要的. ...

  2. js的继承实现

    1.原型链继承 1.创建父类对象2.创建子类函数对象3.将父类的实例对象赋值给子类的原型4.将子类的原型属性的构造函数设置为 子类本身 function Person(name) { this.nam ...

  3. PHP秒杀系统全方位设计(一)

    秒杀系统特点人多商品少时间短流量高外挂机器[黄牛和非黄牛] 技术分析瞬间高并发的处理能力多层次的分布式处理能力人机交互与对抗[12306验证码图片] 技术选型分析Linux+Nginx+PHP+Mys ...

  4. 简单了解下OSI七层模型的作用以及常见网络协议含义和所用端口

    OSI七层模型及每层的作用 包括:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层物理层用来建立.维护.断开物理连接数据链路层建立逻辑链接.进行硬件地址寻址.差错校验等功能网络层进行逻辑地址 ...

  5. Egret学习笔记 (Egret打飞机-7.实现敌机工厂)

    在游戏过程之,敌机是源源不断的冲屏幕上方往下飞,如果我们每一架敌机都直接new的话,在飞机很多的情况下,也许有性能问题. 就像前面子弹对象池一样,我们也要实现一个飞机对象池,也就是标题说的敌机工厂(之 ...

  6. Angular CurrencyPipe货币管道关于人民币符号¥的问题

    做项目(Angular项目)时经常需要处理金额的显示,需要在金额前面加上¥,但又不想用简单在前面加"¥"这么不优雅的方式,于是想到了CurrencyPipe.毕竟,Currency ...

  7. UVA - 10723 类似LCS

    思路:dp(i, j)表示第一个串前i个字符和第二个串前j个字符需要的最短字符串长度,cnt(i, j)表示第一个串前i个字符和第二个串前j个字符需要的最短字符串的个数. 转移方程: if(s1[i] ...

  8. docker-compose 完整打包发布, 多服务,多节点SPRING CLOUD ,EUREKA 集群

    这里不再使用 端口映射的方式,因为不同主机上,Feign 根据 docker hostname访问会有问题. 把打包的好jar copy到docker镜像里 有几个服务,就复制几个dockerfile ...

  9. init启动进程

    init启动进程需要读取()配置文件 1,启动init进程的配置文件是/etc/inittab 2,/etc/sysvinit是系统初始化用的   /sbin/init在核心完整的加载后,开始运行系统 ...

  10. HDP2.0.6+hadoop2.2.0+eclipse(windows和linux下)调试环境搭建

    花了好几天,搭建好windows和linux下连接HDP集群的调试环境,在此记录一下 hadoop2.2.0的版本比hadoop0.x和hadoop1.x结构变化很大,没有eclipse-hadoop ...