子路由是相对路由

路由配置部分:

主要是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. Python基础——数据类型与基本运算【主要为除法】

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 无论是Python 3.x版本还是2.x版本,Python均支持多种数据类型,能够直接处理的数据类型包括Int类型. ...

  2. Android动态加载技术(插件化技术)

    No1: 插件化技术的好处: 1)减轻应用的内存和CPU占用 2)实现热插拔,即在不发布新版本的情况下更新某些模块 No2: 插件化方案必须要解决三个基础性问题:资源访问.Activity生命周期的管 ...

  3. the c programing language 学习过程5

    lumped 集成总结 mandating托管 consecutively连续地 contiguous临近的 mnemonic记忆力的 mimics 酷似 魔方 bind捆绑 synonym同义词 s ...

  4. 检验金额合法性, 只能是正数 或小数(常用js总结)

    //检验金额合法性 只能是正数 或小数 function checkMoney(fileds){ $(fileds).keyup(function () { ,}/); var txt = ''; i ...

  5. H3C三层交换机配置IP

    1.直接在物理端口上设置IP地址. int f1/0/1 port link-mode route #链路模式采用路由 ip add 192.168.10.1 24 ospf network0type ...

  6. java编程思想第四版第五章习题

    创建一个类, 它包含一个未初始化的String引用.验证该引用被Java初始化成了null package net.mindview.initialization; public class Test ...

  7. 胖虎都看得懂的CSS入门

    CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...

  8. 关于echarts

    昨天随手玩了下echarts,看见同事纠结于echarts的兼容问题. 最简单的echarts(官网的): <div id="main" style="width: ...

  9. R语言︱函数使用技巧(循环、if族/for、switch、repeat、ifelse、stopifnot)

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 后续加更内容: 应用一:if族有哪些成员呢?- ...

  10. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...