如何在 Angular 5 中使用 ActivatedRoute？答案

【问题标题】：How to use ActivatedRoute in Angular 5?如何在 Angular 5 中使用 ActivatedRoute？
【发布时间】：2018-10-14 08:03:45
【问题描述】：

我正在尝试做与这篇文章完全相同的事情：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？

【问题讨论】：

标签： angular5 query-string angular-activatedroute

【解决方案1】：

你需要从@angular/router 中导入ActivatedRoute

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

然后将此行添加到 app.module.ts 中 @NgModule 的 imports 数组中：

imports:[
        ........,
        RouterModule.forRoot()
],

那么你可以在下面的任何地方使用：

constructor(private route: ActivatedRoute) {
     console.log(route.snapshot.queryParamMap); // this
}
// or
queryString : string;
getQueryString(){
   this.queryString = this.route.queryParamMap.get('myQueryParam');
}

没有。如果您不必在应用程序中导航页面，则不需要 app.routing.ts。

【讨论】：

所以我将导入行和构造函数参数添加到我的 component.ts 文件中，但现在我收到此错误：ERROR Error: StaticInjectorError(AppModule)[SubmitPaymentComponent -> ActivatedRoute]: StaticInjectorError(Platform:核心)[SubmitPaymentComponent -> ActivatedRoute]: NullInjectorError: No provider for ActivatedRoute!
哦，对不起，我忘了说供应商了..你自己想出来的..太好了！！！

【解决方案2】：

我做了 Arun 建议的两个更改。然后，为了修复“No provider for ActivatedRoute”错误，我进行了如下所示的更改。

1) 我在 app.module.ts 中添加了这一行：

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

2) 我将此行添加到 app.module.ts 中 @NgModule 的导入数组中：

RouterModule.forRoot([])

这篇文章给了我解决方法：Angular error: no provider for ActivatedRoute

现在它可以编译了。万岁！

【讨论】：

【解决方案3】：

ActivatedRoute 包含有关与在插座中加载的组件关联的路由的信息。它还可以用于使用 Id、标志、状态等路由将数据从 one component 传递到 another component。

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

032 是您要编辑的测验的id。

在您的组件中获取此 id（在我的情况下，让它成为 edit_quiz.compontent.ts）以通过激活路由使用。

第 1 步： 从路由器模块导入 ActivatedRoute。

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

第二步：在构造函数中注入ActivatedRoute。

  constructor(private activatedRoute: ActivatedRoute) { }

第 3 步： 获取 ngOnInit(){} 中名为 quizId 的局部变量的 id

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

现在我们可以使用edit_quiz.component.ts 中的 id。

【讨论】：

【解决方案4】：

ActivatedRoute

我来晚了，但希望以下内容对遇到相同问题的未来程序员有用。

导入ActivatedRoute

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

注入依赖注入

constructor(
    private route: ActivatedRoute,
  ) { }

要从链接中获取 id，您可以使用以下

  ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.product = products[+params.get('productId')];
  });
}

【讨论】：

【解决方案5】：

如何获取路由参数： Angular Router 提供了两种不同的方法来获取路由参数：

一个。使用路由快照（ActivatedRoute），

b.使用 Router Observables

Angular 中的激活路由： 提供对与在插座中加载的组件关联的路由信息的访问

Step-1 导入ActivatedRoute接口

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

Step-2 在构造函数中注入ActivatedRoute

constructor(private route: ActivatedRoute, private router: Router) {}

步骤 3 通过给定的 id 获取员工对象并将该对象分配给其本地员工属性。

ngOnInit() {
    this.employee = new Employee();
this.id = this.route.snapshot.params['id'];

注意：属性描述

  snapshot: The current snapshot of this route

【讨论】：