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管道PIPE的介绍与使用方法)
- angular开发详解(详解Angular动态组件)
- angular开发详解(详解Angular组件生命周期一)
- angular封装进度条组件(如何用DevUI搭建自己的Angular组件库)
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- angular 常用模块(详解Angular之路由基础)
- angular教程第九讲(浅谈Angular的12个经典问题)
- angular简单介绍(详解Angular依赖注入)
- angular快速创建模块指令(详解Angular项目中共享模块的实现)
- angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
- angular引入组件库(详解Angular组件之中间人模式)
- angular模块的组成(详解Angular结构型指令模块和样式)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- angular使用方法(Angular环境搭建及简单体验小结)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- angular组件化(详解Angular父子组件通讯)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
- 医事文化谈屑 | 古人的名 字 号(医事文化谈屑古人的名)
- ()
- 网友很惭愧,自己写了很多年的字,到头来还不如一名小学生写的好(自己写了很多年的字)
热门推荐
- xampp数据库表在哪个文件夹(XAMPP集成环境中MySQL数据库的使用)
- laravel数据库日志(Laravel 将数据表的数据导出,并生成seeds种子文件的方法)
- SQLserver中cube:多维数据集实例详解(SQLserver中cube:多维数据集实例详解)
- iframe如何解决跨域问题(关于iframe跨域使用postMessage的实现)
- flex用法(详解关于flex-shrink如何计算的冷知识)
- python如何解压加密zip文件(python读取有密码的zip压缩文件实例)
- typedef和var有什么不同(TypeScrip中泛型的案例详解)
- html使用canvas画矩形(CSS、SVG和canvas分别实现文本文字纹理叠加效果)
- sqlserver数据库还原教程(SQL Server通过重建方式还原master数据库)
- php开发中用什么模板(PHP模版引擎原理、定义与用法实例)