const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'product/:id',
component: ProductComponent,
children: [
{ path: '', component: ProductDescComponent },
{ path: 'seller/:id', component: SellerInfoComponent }
]
}
,
{
path: '**',
component: Code404Component
}
];
<p>
product works!
</p>
<p>商品Id{{productId}}</p>
<a [routerLink]="['./']">商品描述</a>
<a [routerLink]="['./seller',99]">销售员信息</a>
<router-outlet></router-outlet>
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; @Component({
selector: 'app-seller-info',
templateUrl: './seller-info.component.html',
styleUrls: ['./seller-info.component.css']
})
export class SellerInfoComponent implements OnInit {
private sellerId: number; constructor(private routeInfo: ActivatedRoute) { } ngOnInit() {
this.sellerId = this.routeInfo.snapshot.params["id"];
} }
<p>
销售员Id是:{{sellerId}}
</p>
<p>
牛X商品
</p>

angular 子路由的更多相关文章

  1. Angular路由——子路由

    一.子路由语法: 二.实例 在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息. 通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部. 1.新建2个组件修改其内容 n ...

  2. Angular 4 子路由

    子子路由 现在要为产品组件增加两个子组件 1. 创建productDesc和sellerInfo两个组件 ng g component productDesc ng g component selle ...

  3. 理解 angular 的路由功能

    相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...

  4. Angular 4 路由介绍

    Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...

  5. angular -- ng-ui-route路由及其传递参数?script标签版

    考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...

  6. angular 之路由

    1.用angular-cli建一个工程自带路由怎么做? 命令:ng new  项目名 --routing 2.怎么使用路由器和路由器的一些基本使用. //html页面 <a routerLink ...

  7. angular 前端路由不生效解决方案

    angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...

  8. Angular配置路由以及动态路由取值传值跳转

    Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...

  9. [Vue]vue-router嵌套路由(子路由)

    总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹) 1.重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如 ...

随机推荐

  1. 1116 Come on! Let's C

    题意:略. 思路:略. 代码: #include <cstdio> #include <cmath> ; }; bool isPrime(int n) { ) return f ...

  2. Node.js的原型继承函数util.inherits

    util.inherits(constructor, superConstructor)是一个实现对象间原型继承 的函数.JavaScript 的面向对象特性是基于原型的,与常见的基于类的不同.Jav ...

  3. 为什么要初始化css样式

    因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异. 初始化CSS样式主要是提高编码质量,如果不初始化整个页面做完很糟糕,重复的CSS样 ...

  4. Vertrigo Serv + testlink 环境搭建

    今天偶要教大家,使用VertrigoServ来搭建PHP服务器平台.有兴趣的你将会马上拥有一台PHP的WEB服务器哦,呵呵! 第一次给偶的感觉类似于我们租用的PHP虚拟主机.功能可和APPSERV媲美 ...

  5. Java微信公众平台开发(十三)--微信JSSDK中Config配置

    转自:http://www.cuiyongzhi.com/post/57.html 前端开发工程师和关注前端开发的开发者们在2015年中肯定被腾讯的JSSDk引爆过,搞APP的.搞前端的甚至是是搞后端 ...

  6. Mybatis工具Generator

    转自:http://www.cuiyongzhi.com/post/36.html MyBatis Generator(以下简称为MBG),可以逆向生成持久层的基本代码,而且mybatis的实现方案比 ...

  7. IOS ipa安装不上 e8000087

    iPhone5是32位的,所以按照64位编译出来的32位不支持,下面3种方案的,选择第3中就可以了. 5S是64位. e8000087: Your iOS device does not suppor ...

  8. python 中 print 函数用法总结

    Python 思想: “一切都是对象!” 在 Python 3 中接触的第一个很大的差异就是缩进是作为语法的一部分,这和C++等其他语言确实很不一样,所以要小心 ,其中python3和python2中 ...

  9. POJ1161(并查集)

    1.题目链接地址 http://poj.org/problem?id=1161 2.源代码 #include <iostream> using namespace std; ]; ]; i ...

  10. php 实现百度文库搭建

    第一步:安装jodconverter,安装之后可以实现doc文档转成pdf. 文件下载地址为http://www.artofsolving.com/opensource/jodconverter 下载 ...