angular 子路由
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 子路由的更多相关文章
- Angular路由——子路由
一.子路由语法: 二.实例 在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息. 通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部. 1.新建2个组件修改其内容 n ...
- Angular 4 子路由
子子路由 现在要为产品组件增加两个子组件 1. 创建productDesc和sellerInfo两个组件 ng g component productDesc ng g component selle ...
- 理解 angular 的路由功能
相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...
- Angular 4 路由介绍
Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...
- angular -- ng-ui-route路由及其传递参数?script标签版
考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...
- angular 之路由
1.用angular-cli建一个工程自带路由怎么做? 命令:ng new 项目名 --routing 2.怎么使用路由器和路由器的一些基本使用. //html页面 <a routerLink ...
- angular 前端路由不生效解决方案
angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- [Vue]vue-router嵌套路由(子路由)
总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹) 1.重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如 ...
随机推荐
- linux下dmesg命令详解
前言: 有时候想查看一下开机启动信息,可以通过这个命令查询. 1,命令格式 功能说明:显示开机信息. 语 法:dmesg [-cn][-s <缓冲区大小>] 补充说明:kern ...
- ARM-Linux内核移植之(二)——Linux2.6.22内核移植
平台:mini2440 交叉工具链:arm-linux-gcc-4.3.2 一.内核移植基本知识 移植内核也叫构建BSP(boardsupprot packet).BSP的作用有两个:一是为内核运行 ...
- jQuery笔记——事件
常用的事件有:click.dblclick. mousedown.mouseup.mousemove.mouseover.mouseout.change.select.submit.keydown. ...
- springboot成神之——spring jdbc的使用
本文介绍spring jdbc的使用 目录结构 pom配置 properties配置 model层User类 Dao层QueryForListDao config层AppConfiguration 程 ...
- Python时间日期函数讲解
所有日期.时间的api都在datetime模块内. 1. 日期输出格式化 datetime => string import datetime now = datetime.datetime.n ...
- 【js与jquery】javascript中url编码与解码
本文主要针对URI编解码的相关问题做了介绍,对Url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript 中和 编解码相关的几对函数 编码/解码 escape / u ...
- struct 方法使用
struct _Worker { _Worker() { pWokerbase=NULL; hThread=INVALID_HANDLE_VALUE; pListConn=NULL; } struct ...
- oracle级联更新与级联删除
Oracle级联删除:可以使用外键约束来实现,建立表的主外键关系,给列设置级联删除.如下: ——创建了CLASS表,并设置ID字段为主键. -- Create tablecreate table CL ...
- mysql视图总结
http://www.2cto.com/database/201508/427083.html 一. 视图概述 视图是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据. ...
- 关于PHP的一个坑爹问题(页面刷新)
最近在用PHP做一个服务端和一个客户端,在快要完工的时候,出现了一个重大问题---- 当在客户端手动输入IP和端口的时候,一按连接,OK,连接成功,嘻嘻,就在我自以为大功告成的时候,来了个晴天霹雳,一 ...