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. Vue.js:监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  2. PHPCMS分页原理

    调用很方便,使用listinfo方法,如果小于1页不会返回分页字符串 $page = $_GET['page'] ? intval($_GET['page']) : '1'; $products = ...

  3. MFC学习(一) MFC基础类及其层次结构

    从类CCmdTarget派生出绝大多数MFC中的类,其层次结构如下图: 从根类Cobject层层派生出绝大多数MFC中的类,层次结构如下图: MFC中重点类: CObject类是MFC的绝大部分类的基 ...

  4. USB接线图

    一.简介 通用串行总线(英文:Universal Serial Bus,简称USB)是连接外部装置的一个串口汇流排标准,在计算机上使用广泛,但也可以用在机顶盒和游戏机上,补充标准On-The-Go( ...

  5. jQueryUI Sortable 应用Demo

    最近工作用需要设计一个自由布局的页面设计.我选了jQuery UI 的 sortable ,可以拖拽,自由排序 使用很方便,写一个demo,做个记录. 第一.单项目自由排序 下图效果 代码段: < ...

  6. JS中有几种数据类型分别是哪几种

    number,string,boolean,null,undefined,object

  7. pandas层级索引

    层级索引(hierarchical indexing) 下面创建一个Series, 在输入索引Index时,输入了由两个子list组成的list,第一个子list是外层索引,第二个list是内层索引. ...

  8. Aptana Studio 3 如何汉化,实现简体中文版

    这篇文章写了又一年多的时间了,哈哈,今天更新一次 此处修正的下面教程的[第五步]Babel Language Pack Update Site for Helioshttp://download.ec ...

  9. 自定义ListView里面的Item的内容

    我们不可能满足只是往每个item里面填字就足够,像QQ的好友列表就是一个ListView,每个Item里面有头像.名字啊.签名什么的,内容丰富.那我们要怎么定义一个内容丰富的item呢? 要用到Ada ...

  10. Swift中用正规表达式判断String是否是手机号码

    func isTelNumber(num:NSString)->Bool { var mobile = "^1(3[0-9]|5[0-35-9]|8[025-9])\\d{8}$&qu ...