我的编程空间,编程开发者的网络收藏夹
学习永远不晚

详解Angular路由之子路由

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

详解Angular路由之子路由

一、子路由语法

二、实例

在商品详情页面,除了显示商品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的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

详解Angular路由之子路由

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Angular学习之聊聊路由(Routing)

本篇文章带大家继续angular的学习,简单了解一下Angular中的路由(Routing),介绍一下路由的基本用法,看看怎么接收参数,希望对大家有所帮助!
2023-05-14

vue router学习之动态路由和嵌套路由详解

动态路由允许根据用户输入或服务器响应生成路由。VueRouter通过占位符语法实现此功能,嵌套路由允许创建具有层次结构的应用程序。动态嵌套路由进一步提供了基于输入生成嵌套路由的能力。除了这些功能外,VueRouter还提供了路由参数化、别名、过渡效果和导航守卫等其他功能。
vue router学习之动态路由和嵌套路由详解
2024-04-25

【EPVN】EVPN路由详解

EVPN路由类型详解 EVPN路由类型Ethernet A-D路由(type1)ESI Label 扩展团体属性快速收敛水平分割别名 MAC/IP Advertisement Route(type2)MAC\IP路由MAC迁移
2023-08-18

vue如何实现父级路由跳转子路由

今天小编给大家分享一下vue如何实现父级路由跳转子路由的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。子路由配置首先,我们需要
2023-07-05

vue3路由配置以及路由跳转传参详解

路由跳转的同时传递参数是比较常见的,下面这篇文章主要给大家介绍了关于vue3路由配置以及路由跳转传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-16

SpringCloudGateway路由组件详解

SpringCloudGateway是SpringCloud的一个全新项目,它旨在为微服务架构提供一种简单有效的统一的API路由管理方式。这篇文章主要介绍了SpringCloudGateway网关作用,需要的朋友可以参考下
2023-02-22

Django之路由层

url配置就像Django所支撑网站的目录。它的本质是url与要被该url调用的视图函数之间的映射表;通过这个映射表可以告知Django,对于客户端发来的某个url该执行那些代码。  一、简单的路由配置from django.urls im
2023-01-30

实例讲解vue怎么实现父级路由跳转子路由

在Vue中,我们经常需要进行路由跳转操作。Vue的路由功能非常强大,支持嵌套路由和动态路由等功能。本文将讲述如何父级路由跳转子路由。1. 子路由配置首先,我们需要在父级路由中配置子路由。在Vue中,可以使用Vue Router插件来实现路由管理和控制。下面是子路由的配置方式:```const routes = [ { path: '/parent',
2023-05-14

编程热搜

目录