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

我做了Arun建议的两个改变。然后，为了修复“没有ActivatedRoute的提供程序”错误，我做了如下所示的更改。

1）我将此行添加到app.module.ts：

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

2）我将此行添加到app.module.ts中@NgModule的imports数组中：

RouterModule.forRoot([])

这篇文章给了我修复：Angular error: no provider for ActivatedRoute

现在它编译。万岁！

Answer 2

您需要从@ 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。

Answer 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';

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

  constructor(private activatedRoute: ActivatedRoute) { }

步骤3：获取quizId

中名为ngOnInit(){}的局部变量的ID

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

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

Answer 4

激活路线

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

导入ActivatedRoute

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

注入依赖项注入

constructor(
    private route: ActivatedRoute,
  ) { }

并从链接中获取ID，您可以使用以下

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

Answer 5

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

a。使用路由快照（ActivatedRoute），

b。使用路由器可观察物

Angular中的ActivatedRoute： 提供对有关与插座中加载的组件关联的路线的信息的访问权限

步骤1 导入ActivatedRoute接口

de-CH,fr-CH,it-CH

第2步将激活的路由注入构造函数中

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

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

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

注意：属性说明

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

如何在Angular 5中使用ActivatedRoute？

5 个答案: