【Angular】——Angular Route路由传参

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

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

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

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

{
    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，之后可以在进行优化