【Angular】——Angular Route路由传参

前端之家收集整理的这篇文章主要介绍了【Angular】——Angular Route路由传参前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言:项目中涉及到了一个需求,点击链接的时候跳转一个页面,但是在@R_212_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,之后可以在进行优化

猜你在找的Angularjs相关文章