子路由是相对路由

路由配置部分:

主要是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. SpringMvc笔记-注解

    @RequestParam(value = "username", defaultValue = "haha", required = true) 有四个参数 ...

  2. Java语言的分支

    JavaSE:(标准版)是java基础,早期叫j2se,2005改名叫JavaSE(必须). JavaME:(移动版)适合移动端的开发.j2me,2005改名叫java ME(不学) JavaEE:( ...

  3. 静态编译程序 依赖于 Qt 和 Opencv 静态库 会出现 jpeg jpg 图像格式保存崩溃的情况,这是什么原因?

    双方依赖的 jpeg 静态库源码版本冲突,重新静态编译库,都采用一致版本即可.

  4. typeahead + JDK 8 并行流 + redis 高速即时查询.

    感谢JDK8,让我们JAVA 程序员暂时不用担心失业. 有些情况,需要根据用户输入值,即时查询数据库,MYSQL显然不再适合这种业务. mongoDB看似最适合,但是为了这么一个破功能,也不值得特意去 ...

  5. 吾八哥学Selenium(三):操作复选框checkbox/单选框radio的方法

    复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码 ...

  6. 使用java实现阿里云消息队列简单封装

    一.前言 最近公司有使用阿里云消息队列的需求,为了更加方便使用,本人用了几天时间将消息队列封装成api调用方式以方便内部系统的调用,现在已经完成,特此记录其中过程和使用到的相关技术,与君共勉. 现在阿 ...

  7. 【Unity3D】Unity3D开发《我的世界》之一、创建一个面

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_01.html 最近总有人问及我的游戏里跟<我的世界>一样的地形是如何实 ...

  8. 3.1 PCI设备BAR空间的初始化

    在PCI Agent设备进行数据传送之前,系统软件需要初始化PCI Agent设备的BAR0~5寄存器和PCI桥的Base.Limit寄存器.系统软件使用DFS算法对PCI总线进行遍历时,完成这些寄存 ...

  9. mongodb去除重复的数据(二)

    前天因为工作需要,开始着手对数据库中两千多万的数据中其中一个字段重复的数据进行去重. 原本使用一些测试的数据测试后,前天写的那个方法是可行的,但是当面对这个两千万的真实数据时,我却发现这方法有些不顶用 ...

  10. 基于DirectShow的MPEG-4视频传输系统的研究与实现

    1 引言     近年来,随着国民经济的发展,社会各个部门对于视频监视系统的需求越来越多.但目前的很多监视系统都跟具体的硬件相关,必须要具体的采集卡的支持才能实现.所以有必要开发一种具有通用性的视频监 ...