前言:项目中涉及到了一个需求,点击链接的时候跳转一个页面,但是在@R_582_404@面的时候。需要去查询相应班级下面所有班级成员。这就需要在跳转路由的时候传递参数。下面简单介绍一下实现的思路。
首先,路由传参有三种基本的方式
我选择的是第二种方法,在路径中传递参数。
第一步:修改路由的路径使其可以传递参数。在本来跳转路由的后面加上你要传递的参数。
{ 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,之后可以在进行优化 原文链接:https://www.f2er.com/angularjs/146198.html