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

路由动态传参

业务场景:

  • 点解商品列表页里面的商品,根据每个商品的 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>

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

相关推荐
周亚鑫13 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.29 分钟前
CSS3新增边框属性(五)
前端·css·css3
neter.asia1 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫1 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民1 小时前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189111 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾1 小时前
前端基础-html-注册界面
前端·算法·html
Dragon Wu1 小时前
前端 Canvas 绘画 总结
前端