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. 网络编程Socket之wireshark使用

    这里只对wireshark进行简单的使用介绍.里面的报表,IO图形分析等以后再谈....  这里不提供下载地址了,不是什么稀有资源,我使用的wireshark是在百度软件中心下载的. 第一步:选择需要 ...

  2. mysql replication /mysql 主从复制原理

    一下内容均是根据leader的培训分享整理而成 ************************************我是分割线*********************************** ...

  3. maven学习1

     1.Maven的约定 src/main/java: 存放项目的java文件. src/main/resources: 存放项目的资源文件,如spring,hibernate的配置文件. src/te ...

  4. 科学家开发新AI系统,可读取大脑信息并表达复杂思想

    我们终于找到了一种方法,可以在核磁共振成像的信号中看到这种复杂的想法.美国卡内基梅隆大学的Marcel Just说,思维和大脑活动模式之间的对应关系告诉我们这些想法是如何构建的. 人工智能系统表明,大 ...

  5. VS2010调用halcon的时候出现试图加载格式不正确的程序(this.hWindowControl1 = new HalconDotNet.HWindowControl();)

    [重要错误修改] /// <summary> /// 设计器支持所需的方法 - 不要 /// 使用代码编辑器修改此方法的内容. /// </summary> private v ...

  6. 系统环境变量PATH被删除后从注册表恢复

    转自:https://wenku.baidu.com/view/75d0b6ec19e8b8f67c1cb958.html 首先需要了解path这个环境变量有什么用: 当你打开命令提示窗口时,即win ...

  7. Python基础学习三 文件操作(一)

    文件读写 r,只读模式(默认). w,只写模式.[不可读:不存在则创建:存在则删除内容:] a,追加模式.[不可读: 不存在则创建:存在则只追加内容:] r+,[可读.可写:可追加,如果打开的文件不存 ...

  8. Hbase 一次表异常,有一张表 无法count scan 一直显示重连

    z_activeagent z_weekstore z_wstest zz_monthstore row(s) in 0.5240 seconds => ["KYLIN_02YJ3NJ ...

  9. 如何解决quartz在集群下出现的资源抢夺现象

    Quartz是一个开源的作业调度框架,它完全由Java写成,并设计用于J2SE和J2EE应用中.它提供了巨大的灵活性而不牺牲简单性.你能够用它来为执行一个作业而创建简单的或复杂的调度,简单的说就是可以 ...

  10. 说说API的重放机制

    API的重放机制 我们在设计接口的时候,最怕一个接口被用户截取用于重放攻击.重放攻击是什么呢?就是把你的请求原封不动地再发送一次,两次...n次,一般正常的请求都会通过验证进入到正常逻辑中,如果这个正 ...