【Angular】——Angular Route路由传参

最新推荐文章于 2025-07-07 08:28:04 发布

原创最新推荐文章于 2025-07-07 08:28:04 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

☆☆ Web前端同时被 2 个专栏收录

13 篇文章

订阅专栏

———— Angular

9 篇文章

订阅专栏

本文介绍了一种通过在路径中传递参数来实现路由跳转的方法，适用于需要在跳转时携带额外信息的应用场景。具体步骤包括修改路由配置以支持参数传递、实现跳转逻辑并在目标组件中获取这些参数。

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

前言：项目中涉及到了一个需求，点击链接的时候跳转一个页面，但是在跳转页面的时候。需要去查询相应班级下面所有班级成员。这就需要在跳转路由的时候传递参数。下面简单介绍一下实现的思路。

首先，路由传参有三种基本的方式

我选择的是第二种方法，在路径中传递参数。

第一步：修改路由的路径使其可以传递参数。在本来跳转路由的后面加上你要传递的参数。

{
    path: 'onclassmember-manage/:id', //id就是所带的参数
    component: OnclassmemberManageComponent

  }

第二步：编辑跳转路由事件

linkClick(data:any){
    //this.onClassInfo=this.data[data];
    
    console.log(this.data[data]);
    this.router.navigate(['workspace/education-plan/onclassmember-manage',this.data[data].id]);
    //this.router.navigateByUrl("onclassmember-manage");

  }

第三步：接收路由传的参数

import { Component, OnInit, ViewChild } from '@angular/core';
import { EducationPlanService } from '../../education-plan.service';
import { ActivatedRoute } from "@angular/router";  //引入路由

@Component({
  selector: 'app-onclassmember-manage',
  templateUrl: './onclassmember-manage.component.html',
  styleUrls: ['./onclassmember-manage.component.css']
})
export class OnclassmemberManageComponent implements OnInit {

  private id: string; //声明id接收路由带来的参数

  constructor(public epService: EducationPlanService, private router: ActivatedRoute) { }
  
  ngOnInit() {
    this.id = this.router.snapshot.params["id"];//路由id赋值给声明的id
    alert(this.id);
  }
}

后记：这只是其中一种解决问题的思路，遗留问题：这样有一个弊端就是暴露了id，之后可以在进行优化