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数组来定义子路由,具体如 ...
随机推荐
- Spring启动后获取所有拥有特定注解的Bean,注解的属性值
最近项目中遇到一个业务场景,就是在Spring容器启动后获取所有的Bean中实现了一个特定接口的对象,第一个想到的是ApplicationContextAware,在setApplicationCon ...
- ES之四、Elasticsearch集群和索引常用命令
REST API用途 elasticsearch支持多种通讯,其中包括http请求响应服务,因此通过curl命令,可以发送http请求,并得到json返回内容. ES提供了很多全面的API,常用的RE ...
- Velodyne 线性激光雷达数据合成
坐标系旋转 如果想用字母表示角度,有两个方法: 1. 用三角函数sind(θ4).cosd(θ4).tand(θ4).atand(θ4)进行表示,注意:θ4在输入时是角度,只是没有度数特有的符号(° ...
- microtime() 测试代码执行时间,提高编码效率
<?php $b_time = microtime(true); $a = array("); $count = ; foreach ($a as $key => $value) ...
- zabbix的sendEmail配置
zabbix的sendEmail配置 [root@hongquan scripts]# yum install sendmail[root@hongquan soft]# tar xvzf sendE ...
- (转) 读懂IL
引言 转自园子里的一片关于IL的好文,分享的同时,方便自己今后查阅. 原文链接:http://www.cnblogs.com/brookshi/p/5225801.html ------ 略过作者调侃 ...
- shell命令getopts
#!/bin/bash set -e cmd="ls" while getopts :a:t:sn opt; do case $opt in a) cmd=$cmd" - ...
- Android的按钮单击事件及监听器的实现方式
第一种:匿名内部类作为事件监听器类 大部分时候,事件处理器都没有什么利用价值(可利用代码通常都被抽象成了业务逻辑方法),因此大部分事件监听器只是临时使用一次,所以使用匿名内部类形式 的事件监听器更合适 ...
- leetcode693
class Solution { public: bool hasAlternatingBits(int n) { ; while (n) { ; ) { last = x; } else { if ...
- c# 通过dllimport 调用c 动态链接库
https://blog.csdn.net/zhunju0089/article/details/80906501 这篇文件很详细 讲述了如何创建c 动态链接库项目 有一些注意的地方 不做介绍 下面是 ...