angular5 - 如何在 Angular 5 中使用 ActivatedRoute？

Question

我正在尝试做与这篇文章完全相同的事情:Angular 4 get queryString

我正在使用 Angular 5.2.5。

当用户第一次访问网站时，ActivatedRoute 似乎是用来从 URL 中检索查询字符串值的东西。但是，我无法弄清楚我需要导入什么才能使用 ActivatedRoute。

有人可以准确地指定需要添加到 app.module.ts 文件中的内容，以及我尝试使用 ActivatedRoute 的 component.ts 文件吗？

这篇文章指定将路由添加到 @NgModule 的导入数组:No provider for ActivatedRoute - Angular 2 RC5 .但是，我没有 app.routing.ts 文件。是否必须创建 app.routing.ts 文件才能使用 ActivatedRoute？

Answer 1

激活路由 包含有关与在 socket 中加载的组件关联的路由的信息。
它也可以用来传递来自 one component 的数据。至another component使用 ID、标志、状态等路线。

http://localhost:4200/quiz/edit_quiz/032

032正在 id您要编辑的测验。

在您的组件中获取此 ID(在我的情况下，让它成为 edit_quiz.compontent.ts )以使用激活的路由。

第一步:从路由器模块导入激活路由。

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

第二步:在构造函数中注入(inject) ActivatedRoute。

  constructor(private activatedRoute: ActivatedRoute) { }

第三步:获取名为 quizId 的局部变量的 id在 ngOnInit(){}

   ngOnInit() {
    this.quiz_id = this.activatedRoute.snapshot.params['id'];
   }

现在我们在 edit_quiz.component.ts 中有 id使用。