angular路由树(详解Angular路由之子路由)
类别:编程学习 浏览量:2438
时间:2022-03-28 01:34:11 angular路由树
详解Angular路由之子路由目录
- 一、子路由语法
- 二、实例
- 1、新建2个组件修改其内容
- 2、修改路由配置
- 3、修改product.component.ts的模版
在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息。
通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部。
1、新建2个组件修改其内容
ng g component productDesc ng g component sellerInfo
重点是修改销售员信息组件,显示销售员ID。
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"]; } }
2、修改路由配置
给商品组件加上子路由
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 } ];
3、修改product.component.ts的模版
注意:routerLink里要配置成./,不能再用/。
<p> 这里是商品信息组件 </p> <p> 商品id是: {{productId}} </p> <a [routerLink]="['./']">商品描述</a> <a [routerLink]="['./seller',99]">销售员信息</a> <router-outlet></router-outlet>
效果:
主路由是/product/2,子路由为空字符串:
主路由的商品详情组件显示出来了,子路由的空字符串对应的商品描述组件也显示出来了。
点销售员信息链接:
URL路径变成:http://localhost:4201/product/2/seller/99。
子路由seller/99,对应的sellerInfo组件也展示出来。
注意:
1、插座router-out形成父子关系,可以无限嵌套
2、所有的路由信息都是在模块层,在app.routing.module.ts中配置的。
路由信息都是在模块层,所有的组件本身,并不知道任何跟路由相关的信息。
插座之间的父子关系——子路由。
插座之间的兄弟关系——辅助路由。
以上就是详解Angular路由之子路由的详细内容,更多关于Angular的资料请关注开心学习网其它相关文章!
您可能感兴趣
- angular怎么把组件用在根组件里(详解Angular组件之投影)
- angular封装公共组件(详解Angular组件之生命周期二)
- angular封装进度条组件(如何用DevUI搭建自己的Angular组件库)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- angular简单介绍(详解Angular依赖注入)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- angular路由树(详解Angular路由之子路由)
- angular开发详解(详解Angular动态组件)
- angular 常用模块(详解Angular之路由基础)
- angular模块的组成(详解Angular结构型指令模块和样式)
- angular定义一个管道(Angular管道PIPE的介绍与使用方法)
- angular开发详解(详解Angular组件生命周期一)
- angular使用方法(Angular环境搭建及简单体验小结)
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- angular快速创建模块指令(详解Angular项目中共享模块的实现)
- angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
- 新疆80后在淘宝卖干果 以前是 不务正业 如今帮乡亲致富(新疆80后在淘宝卖干果)
- 弄清楚了销 售 买 卖这四个字,母婴生意做起来就没那么难了(弄清楚了销售买)
- 数读 买首饰金是 投资黄金 吗 买金容易卖金难(数读买首饰金是)
- 销 售 买 卖 你真的了解这四个字了吗(销售买)
- 谢娜是得罪快乐大本营造型师了吗 全场被黑化(谢娜是得罪快乐大本营造型师了吗)
- 前《iLOOK》时装总监 《快乐大本营》御用造型师上线(快乐大本营御用造型师上线)
热门推荐
- python怎么输出一个矩阵(python实现转圈打印矩阵)
- vue-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- dedecms怎么加页面(dedecms导航判断当前选中样式的方法)
- sql server支持两种登录验证方式(远程登陆SQL Server 2014数据库的方法)
- mstsc远程桌面不成功(远程桌面连接命令mstsc怎么用)
- sql server 知识大全(sql server 交集,差集的用法详解)
- mvc编译时,让View中的错误提示
- mysql事务特性和隔离级别(Mysql事务特性和级别原理解析)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)