Angular学习笔记(四)之路由参数和嵌套路由

本文详细介绍了Angular中通过三种不同方式传递路由参数的方法:查询参数、路由路径参数和路由配置参数,并对比了snapshot与subscribe的不同使用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ActivatedRoute 路由参数

当前激活的路由对象,保存这当前路由的信息,如路由地址,路由参数等。

三种传参方式
  1. 在查询参数中传递数据 =>
    html形式如:<a [routerLink]="['/stocks']" [queryParams]="{id:1}">股票信息</a>
    url形式如:/product?id=1&name=2
    获取参数格式:ActivatedRoute.snapshot.queryParams["id"]ActivatedRoute.queryParams["name"]

  2. 在路由路径中传递数据 =>
    routes中配置:{path:'/product/:id'}
    html 形式如:<a [routerLink]="['/stocks','1']">股票信息</a>
    url形式如:/product/1
    获取参数格式:ActivatedRoute.snapshot.params["id"]

  3. 在路由配置中传递数据 =>
    routes中配置:{path:'stocks',component:StocksComponent,data:[{ispro:true}]}
    获取参数格式:ActivatedRoute.data[0]["ispro"]

一、demo展示

html:

 <a [routerLink]="['/stocks']" [queryParams]="{id:1}">在查询参数中传递,增加queryParams属性</a>

 <a [routerLink]="['/stocks','1']" >在路由路径中传递,根据配置的path值改变</a>

 <a [routerLink]="['/stocks']" >在路由配置中传递,无变化</a>

routes配置:

// 第一种,查询参数,无改变
{path:'stocks',component:StocksComponent}
// 第二种,路由参数,改变path
{path:'stocks/:id',component:StocksComponent}
// 第三种,路由配置,增加data属性
{path:'stocks',component:StocksComponent,data:[{ispro:true}]}

控制器逻辑 ts:

 export class StocksComponent implements OnInit {

  private stockId:boolean;
  //注入ActivatedRoute服务
  constructor(private routerInfo:ActivatedRoute) { }

  ngOnInit() {
    //查询参数中传递获取值
    this.stockId = this.routerInfo.snapshot.queryParams["id"];
   //路由路径参数中传递获取值
    this.stockId = this.routerInfo.snapshot.params["id"];
  //路由配置中传递获取值
    this.stockId = this.routerInfo.snapshot.data[0]["ispro"];
  }
}
二、snapshot和subscribe的区别

使用snapshot

this.stockId = this.routerInfo.snapshot.params["id"];

使用subscribe

this.routerInfo.params.subscribe((params:Params)=>this.stockId = params["id"] );

//每当params:Params值发生变化时,(params:Params)=>this.stockId = params["id"]都会被调用一次

当组件从自身路由到自身时,选择用subscribe方式,否则使用snapshot方式节约资源。

嵌套路由

在父级路由的组件里,访问子路由的routerLink

  • 子路由可以无限极嵌套
  • 路由信息和组件是分离的,路由信息在模块上配置,与组件并不相粘合

1.在路由配置中增加children属性,父路由是stocks,子路由有两个

    {path:'stocks/:id',component:StocksComponent,children:[
        {path:'',component:BuyerListComponent},
        {path:'saller/:id',component:SallerListComponent}
        ]
    }

2.子组件中写明routerLink和router-outlet

<div>
  <span>下面是嵌套路由信息</span>
  <a [routerLink]="['./']">(默认空路径时)展示买家信息</a>
  <a [routerLink]="['./saller']">展示卖家信息</a>
  <router-outlet></router-outlet>   
</div>

Tips:
子路由[routerLink]的值为 ./path,表示在当前主路由下找名称为path的子路由
不管嵌套多少级,子路由的[routerLink]的值写法都为 ./path

不用滞留采花保存,只管往前走去,一路上百花自会盛开。 ——泰戈尔

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值