angular入门基础教程(十二）动态路由数据传参

路由动态传参

业务场景：

• 点解商品列表页里面的商品，根据每个商品的 id 进入详情页
• 其他主要就是不同的类型，展示相同页面的不同数据内容

步骤一：

改造 src/app/app.config.ts，在provideRouter里面加入withComponentInputBinding()

import { provideRouter, withComponentInputBinding } from '@angular/router';

registerLocaleData(zh);

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    //注入路由,加入withComponentInputBinding()
    provideRouter(routes, withComponentInputBinding()),
    ...
  ],
};

步骤二：

改造src/app/app.routes.ts里面加入id参数

{
    path: 'goods-detail/:id',
    component: GoodsDetailComponent,
    title: '商品详情',
  }

步骤三：

在需要使用理由跳转的页面，注入路由模块的依赖
改造src/app/components/goods-list/goods-list.component.ts

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  ...
  imports: [RouterModule],
  ...
})

步骤四：

改造src/app/components/goods-list/goods-list.component.html,下面两种跳转方式都行

<li>
  <!-- <a routerLink="/goods-detail/{{1}}" routerLinkActive="true">啤酒</a> -->
  <a [routerLink]="['/goods-detail',1]" routerLinkActive="true">啤酒</a>
</li>

改成迭代的形式

<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

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'];
    });
  }
}

• 展示数据

<div>
  <h3>{{goodsId}}</h3>
  <p>goods-detail works!</p>
</div>

这样我们就实现了路由动态传参