Question

您好我正在尝试使用Angular2提取网址的id部分。

http://localhost:3000/item/187809

我一直在onInit中玩ActiveRoute，但没有运气

 this.route.queryParams.forEach((params: any) => {
   console.log("QUERYPARAMS");
   console.log(params);
 });

还尝试订阅像这样的路线改变

this.routeSub = this.route.queryParams.subscribe(params => {
   console.log(params);
   console.log(+params['id']);
});

但是params只是一个空对象。

我将路线定义为像这样的懒惰路线

{
path: item',
children: [
  { path: ':id', loadChildren: './item/item.module#ItemModule' },
]
},

我认为问题在于我有一个标题组件和一个主要组件来保存延迟加载的路由子节点。我正在尝试在头部组件中加载id。

知道缺少什么？

Answer 1

1）确保您已配置了一个期望id作为参数的路由，如下所示：

  {path: 'item/:id', component: SomeItemComponent}

2）您需要导入ActivatedRoute（不是ActiveRoute）并将其注入组件构造函数中：

  constructor(private route: ActivatedRoute) { }

3）在同一组件中的ngOnInit中，您可以通过订阅来访问params可观察数据中的数据：

  ngOnInit() {
    this.route.params.subscribe(params => {
      console.log(params) //log the entire params object
      console.log(params['id']) //log the value of id
    });
  }

Answer 2

我知道我的回复有点迟了，但为了防止您遇到问题，请查看Angular文档。

angular routing tutorial

从链接中查看示例。

首先导入ActivatedRoute：

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

然后将其注入构造函数

constructor(private route: ActivatedRoute) {}

在OnInit（）

中

ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
}

并且像这样你不需要直接担心任何Observable。

希望这会对你有所帮助。

Answer 3

我怀疑问题在于您使用的是queryParams，而不仅仅是params。

params：一个Observable，包含特定于路径的必需和可选参数

queryParams：包含可供所有路径使用的查询参数的Observable。

所以试试这个：

this.route.params.subscribe(params => {
   console.log(params);
   console.log(+params['id']);
});

Answer 4

this.routeSub = this.route.params.subscribe(params => {
   console.log(params);
   console.log(+params['id']);
});

Answer 5

我在使用 Angular 8 时遇到了同样的问题，并通过以下方式解决了：

首先，导入ActivatedRoute：

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

然后，在构造函数中注入 ActivatedRoute：

constructor(private activatedRoute: ActivatedRoute) {}

您的 ngOnit 方法将如下所示。

ngOnInit(){
     const id = this.activatedRoute.snapshot.paramMap.get('id');
 }

我是从 official documentation of Angular 找到的。

Answer 6

您有多种选择以获得id

constructor(private route: ActivatedRoute) { }

1-在 params

的帮助下

const id= this.route.snapshot.params['id'];

或

const id = this.route.snapshot.params.id // any param name after "params"

2-在 paramMap

的帮助下

const id= this.route.snapshot.paramMap.get('id')

3- subscribe至params（不要忘记退订）

  private subscription: Subscription

  constructor(private route: ActivatedRoute) { }
  ngOnInit(): void {
    this.subscription = this.route.params.subscribe(params => {
      const id = params['id']
    })
  }

 //To prevent memory leak
  ngOnDestroy(): void {
    if (this.subscription)
      this.subscription.unsubscribe()
  }

使用Angular2从url中提取id

6 个答案: