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

Question

我希望使用Angular中的路由器传递带有URL的ID。我必须在另一个页面上获取该值。就像我有一个学生列表。单击列表中特定学生所属的编辑按钮。该学生的ID传递到编辑学生详细信息页面。获取该studentId后，我想在输入字段中显示现有详细信息。

那么我该如何做呢？

这是我的示例路径。

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

- Deepak Pookkote

---

学校-学生列表/:id - Jaydip Jadhav

@JaydipJadhav 是的。id 应该像这样在 URL 中传递。例如：（school-students-list/:123） - Deepak Pookkote

@JaydipJadhav：我该怎么做？以及如何做？ - Deepak Pookkote

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) {}

初始化时，订阅路由参数。

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]">编辑</a>

要通过组件方法导航，请从@angular/router注入Router，然后当您想要导航时，请使用this.router.navigate(['/edit-student-details', memberId]);

- Jared

---

我更新了我的答案，说明如何使用 ActivatedRoute。 - Jared

我有一个学生列表页面，可以查看学生列表（每个学生都分配了唯一的成员ID），这是API的响应，我正在显示它。学生列表包含（studentlist.html和studentlist.ts），在UI上，每行都有一个编辑按钮。因此，在单击每行时，它应该向我显示文本字段中学生的详细信息以进行编辑。编辑页面包含（editStudent.ts和html文件）。 - Deepak Pookkote

在您的学生列表中，使按钮路由到编辑详细信息页面，并传递他们的成员ID，如下所示：<button [routerLink]="['/edit-student-details', memberId]">编辑</button>。 - Jared

我能把这个讨论移到聊天室吗？@Jared - Deepak Pookkote

让我们在聊天中继续这个讨论。 - Jared

Answer 2

从 @angular/router 导入 ActivatedRoute

import { ActivatedRoute, Router } from '@angular/router';

从构造函数中访问参数：

constructor(private route: ActivatedRoute) {
    let id = +this.route.snapshot.params['id'];
    // use the id here
}

- Sergey Rusakov