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. 【转】Jmeter和LR上传文件和下载

    背景: 在某个申请业务中,需要上传附件文件,然后才能提交该申请 遇到的问题: 1,  在使用Jmeter或者LR进行录制时,无法录制到上传文件的请求,只能通过Fiddler能查看到该请求 2,  因为 ...

  2. java数组求输入平均值

    真是学了后面忘了前面,一维数组都忘了 package com.c2; //总结类型转换不对,导致运行报错 //以及没有new,导致空指针异常 //引入流. import java.io.*; publ ...

  3. datatables ajax异步分页

    $('#sample_1').dataTable({ "sAjaxSource": "../table/data", // "bProcessing& ...

  4. 给安卓端调用的短信发送接口demo

    package com.js.ai.modules.pointwall.action; import java.io.IOException; import java.util.HashMap; im ...

  5. Linux性能监测:磁盘IO篇

    磁盘通常是计算机最慢的子系统,也是最容易出现性能瓶颈的地方,因为磁盘离 CPU 距离最远而且 CPU 访问磁盘要涉及到机械操作,比如转轴.寻轨等.访问硬盘和访问内存之间的速度差别是以数量级来计算的,就 ...

  6. js中的Array

    js中的Array 啥是ArrayLike对象 类似,下面这种对象的就是ArrayLike var arraylike = { 0: "a", 1: "b", ...

  7. java - 只输出不含中文标点符号的中文

    String a ="12dss显示,‘:()中文只"; StringBuffer b = new StringBuffer(); for(int i = 0;i<a.len ...

  8. 完美解决HALCON C#编程目标平台冲突问题

    完美解决HALCON C#编程目标平台冲突问题   楼主# 更多发布于:2016-11-23 10:06     背景: 目标机器工控机使用11.0.1 32位Halcon 原因你懂的.开发环境Win ...

  9. java中的类型安全问题-Type safety: Unchecked cast from Object to ...

    首先,java语言室类型安全的,通常我们遇到这个问题是出现在Object转化为目标类型时, 这个转化并不是安全的.这个问题普遍认为因为使用了jdk1.5或者1.6的泛型, request.getAtt ...

  10. 结合spring 实现自定义注解

    注解类 import java.lang.annotation.*; /** * Created by Administrator on 2016/6/28. */ //ElementType.MET ...