如何在Angular 4中使用Router params传递和获取参数？

Question

我想在Angular中使用Router传递一个带url的id.我必须在另一页上获取该值.就像我有一个学生名单.点击编辑按钮属于列表中的特定学生.该学生的ID通过编辑学生详细信息页面.获取该studentId后,我想在输入字段中显示现有详细信息.

那么我该怎么做呢？

这是我的榜样路径

 { path: 'school-students-list', component: studentsListPageComponent },
  { path: 'edit-student-details', component: studentEdit },

Answer 1

给路由一个这样的参数:

{ path: 'edit-student-details/:id', component: studentEdit }

然后ActivatedRoute在该组件中使用以访问路由参数.从中导入@angular/router

import { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

将其注入构造函数中

private routeSub: Subscription;

constructor(private route: ActivatedRoute) {}

在init上,订阅路由参数

ngOnInit(): void {
    this.routeSub = this.route.params.subscribe((params: Params): void => {
        const id = params['id'];
    });
}

总是一个好主意取消订阅毁灭

ngOnDestroy(): void {
    this.routeSub.unsubscribe();
}

要链接到此页面,传递其会员ID,请在学生列表页面上执行此操作:

<a [routerLink]="['/edit-student-details', memberId]">Edit</a>

要通过组件的方法导航,注入Router来自@angular/router然后当你要浏览,使用this.router.navigate(['/edit-student-details', memberId]);