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练习,,,从键盘输入次数,输出最大值,和

    总结:你的关注,是我的动力 package com.b; import java.util.Scanner; public class YUIO { public static void main(S ...

  2. ajax-简介和实现注册登录

    ajax知识点介绍: 异步Javascript和XML,用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML),也有可能是json 优点: 1. AJAX使 ...

  3. linux平台总线驱动设备模型之点亮LED

    这一节里,我们来使用平台驱动设备这一套架构来实现我们之前使用简单的字符设备驱动点亮LED,这里并无实际意义,只是告诉大家如果编写平台总线驱动设备. 问:如何编写平台总线驱动设备这一套架构的设备驱动? ...

  4. 优化深度神经网络(三)Batch Normalization

    Coursera吴恩达<优化深度神经网络>课程笔记(3)-- 超参数调试.Batch正则化和编程框架 1. Tuning Process 深度神经网络需要调试的超参数(Hyperparam ...

  5. 03-CSS中的选择器

    高级选择器分为: 后代选择器 子代选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器 , 顾名思义  父元素的后代(包括儿子,孙子,重孙子) 中间空格隔开 是后代 .container ...

  6. leetcode583

    public class Solution { public int MinDistance(string word1, string word2) { , word2.Length + ]; ; i ...

  7. delphi 手电筒

    Self.CameraComponent1.TorchMode := TTorchMode.ModeOn;

  8. Emgu学习之(一)----Emgu简介

    OpenCV OpenCV是一个开源的跨平台的计算机视觉库,它的设计目标时执行速度尽量快,主要关注实时应用.可以运行在Linux.Windows.Mac OS.Android.IOS.Maemo.Fr ...

  9. s3c6410开发板LED驱动程序设计详细…

    2 下面来看看tiny6410关于LED的原理图如图(1)所示: 图1    LED原理图 3 LED实例,代码如下所示:(代码摘自\光盘4\实验代码\3-3-1\src\main.c) main.c ...

  10. 张超超OC基础回顾04_实例变量修饰(@public),点语法,self关键字,多态,继承

    零.实例变量修饰符 /* @public 就是实例变量修饰符 @public >可以在其它类中访问被public修饰的成员变量 >也可以在本类中访问被public修饰的成员变量 >可 ...