子路由是相对路由

路由配置部分:

主要是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. ListIterator的使用

    package cn.lonecloud.Iterator; import java.util.ArrayList; import java.util.ListIterator; public cla ...

  2. 剑指offer第四天

    25.复杂链表的复制 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的 ...

  3. 情景linux--如何解决read命令产生的硬编码问题

    情景 我们知道,read命令可以读取文件内容,并把内容赋值给变量. 以如下的数据文件为例. $ cat data.txt 1 201623210021 wangzhiguo 25 2 20162321 ...

  4. 简单的GIT上传

    简单的GIT上传 上传项目时先新建一个 文件夹 mkdir test 然后在切换到test文件夹中然后把github 中的项目拷贝下来 git glone url 然后git init 查看文件 然后 ...

  5. spring中自定义Event事件的使用和浅析

    在我目前接触的项目中,用到了许多spring相关的技术,框架层面的spring.spring mvc就不说了,细节上的功能也用了不少,如schedule定时任务.Filter过滤器. intercep ...

  6. 基于LDA的Topic Model变形

    转载于: 转:基于LDA的Topic Model变形 最近有想用LDA理论的变形来解决问题,调研中.... 基于LDA的Topic Model变形 基于LDA的Topic Model变形最近几年来,随 ...

  7. WebService之CXF注解报错(三)

    WebService之CXF注解 1.具体错误如下 五月 04, 2014 11:29:28 下午 org.apache.cxf.wsdl.service.factory.ReflectionServ ...

  8. Error Code: 1068. Multiple primary key defined

    1.错误描述 10:10:38 alter table user add num int(8) primary key first Error Code: 1068. Multiple primary ...

  9. Linux显示目前登入系统的用户信息

    Linux显示目前登入系统的用户信息 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ who youhaidong :0 2015-01-26 22:43 (: ...

  10. 第一次C语言实验报告

    一.实验题目,设计思路,实现方法 实验四4-2-9三个数由小到大输出,要求比较三数大小并按顺序输出.运用穷举法列举所有可能性再对应输出.运用多分支结构. 实验四4-2-4 三天打鱼两天晒网,运用循环结 ...