13

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

我正在使用 Angular 5.2.5。

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

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

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

4

5 回答 5

17

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

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

032是id您要编辑的测验。

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

第 1 步：从 Router 模块导入 ActivatedRoute。

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

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

  constructor(private activatedRoute: ActivatedRoute) { }

第 3 步：quizId获取名为in的局部变量的 idngOnInit(){}

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

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

于 2019-05-10T06:44:17.903 回答
3

我做了阿伦建议的两个改变。然后，为了修复“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

现在它编译了。万岁！

于 2018-05-03T23:36:50.393 回答
2

您需要从 @angular/router 导入 ActivatedRoute

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

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

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。

于 2018-05-03T22:48:31.180 回答
0

激活路由

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

导入激活路由

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

注入依赖注入

constructor(
    private route: ActivatedRoute,
  ) { }

并从链接中获取 id，您可以使用以下内容

  ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.product = products[+params.get('productId')];
  });
}
于 2019-09-05T17:35:33.233 回答
0

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

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

湾。使用路由器 Observables

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

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
于 2020-09-18T14:42:24.127 回答