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. java代码实现鼠标双击出现画图-----------paint()方法由系统自动调用,且一定是小写的字母p

    总结:在运行过程中,自己不是很认真,没有检查自己写的代码,结果是无论你怎么运行,双击 frame都没用,因为系统根本就没有调用paint()方法绘图.所以很重要的是实现这个方法 package com ...

  2. mysql基础之四:int(M)中M的含义

    昨天写sql文件时把以前一直不是很明白的地方弄明白了,就是在设置int型的时候,需要设置int(M),以前知道这个M最大是255,但是到底应该设置多少并没有在意. 查了下官方manual 有这样的语句 ...

  3. tp5操作mongo

    1.通过composer安装 composer require mongodb/mongodb 2.使用 <?php /** * @author: jim * @date: 2017/11/17 ...

  4. Linux学习笔记 -- Shell 变量

    定义变量 语法: 变量名=值 myVal= 需要注意一下变量明德规则: 首个字符必须为字母(a-z,A-Z). 中间不能有空格,可以使用下划线(_). 不能使用标点符号. 不能使用bash里的关键字( ...

  5. Altium Designer之多图纸设计

    Altium Designer的多图纸功能感觉比较方便:今天翻了下徐老师<Altium Designer 快速入门>里面关于多图纸设计的介绍,再参考了altium 网站的一些资料,算是摸熟 ...

  6. VS2017中的附加到进程

    vs2017 里加入了IIS Express,所以在web项目执行的时候,在附加进程中找不到端口号了,只能找到PID 但是浏览器的地址栏里还是带有端口的地址:http://localhost:1351 ...

  7. python's eithteenth day for me 面向对象——命名空间

    创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些明细称为类的属性. 而类有两种属性:静态属性和动态属性:   1,静态属性就是直接在类中定义的变量. 2,动态属性就是定义在类中的方 ...

  8. openstack resize 更新显卡驱动程序解决问题

  9. 取当前时间,格式为,yyyy-mm-dd hh:mm:ss

    function CurentTime() { var now = new Date(); var year = now.getFullYear(); //年 var month = now.getM ...

  10. Oracle11gR2--SEC_CASE_SENSITIVE_LOGON参数解析

    在Oracle的11g之前的版本中密码是不区分大小写的(使用双引号强制除外). 在Oracle的11g以及以后的版本中对此有所增强.从此密码有了大小写的区分. 这个大小写敏感特性是通过SEC_CASE ...