路由动态传参
业务场景:
- 点解商品列表页里面的商品,根据每个商品的 id 进入详情页
- 其他主要就是不同的类型,展示相同页面的不同数据内容
步骤一:
改造 src/app/app.config.ts,在provideRouter
里面加入withComponentInputBinding()
js
import { provideRouter, withComponentInputBinding } from '@angular/router';
registerLocaleData(zh);
export const appConfig: ApplicationConfig = {
providers: [
...
//注入路由,加入withComponentInputBinding()
provideRouter(routes, withComponentInputBinding()),
...
],
};
步骤二:
改造src/app/app.routes.ts
里面加入id
参数
js
{
path: 'goods-detail/:id',
component: GoodsDetailComponent,
title: '商品详情',
}
步骤三:
在需要使用理由跳转的页面,注入路由模块的依赖
改造src/app/components/goods-list/goods-list.component.ts
js
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
@Component({
...
imports: [RouterModule],
...
})
步骤四:
改造src/app/components/goods-list/goods-list.component.html
,下面两种跳转方式都行
html
<li>
<!-- <a routerLink="/goods-detail/{{1}}" routerLinkActive="true">啤酒</a> -->
<a [routerLink]="['/goods-detail',1]" routerLinkActive="true">啤酒</a>
</li>
改成迭代的形式
html
<div>
<ul>
@for (item of goodsList; track $index) {
<!-- <li><a routerLink="/goods-detail/{{item.id}}">{{item.title}}</a></li> -->
<li><a [routerLink]="['/goods-detail',item.id]">{{item.title}}</a></li>
}
</ul>
</div>
步骤五:
最后在详情页面进行数据的接受,展示
- 注入路由模块的依赖,
ActivatedRoute
js
import { Component } from '@angular/core';
// 导入路由模块的依赖,ActivatedRoute
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-goods-detail',
standalone: true,
imports: [],
templateUrl: './goods-detail.component.html',
styleUrl: './goods-detail.component.css',
})
export class GoodsDetailComponent {
goodsId = 0;
// 注入路由模块的依赖,ActivatedRoute
constructor(private route: ActivatedRoute) {
this.route = route;
}
ngOnInit() {
this.route.params.subscribe((params) => {
this.goodsId = params['id'];
});
}
}
- 展示数据
html
<div>
<h3>{{goodsId}}</h3>
<p>goods-detail works!</p>
</div>
这样我们就实现了路由动态传参