使用 Angular 从 URL 中提取 id(2+ 直到最新) [英] Extract id from URL using Angular (2+ till latest)

问题描述

我正在尝试使用 Angular2 提取 URL 的 id 部分.

Hi I am trying to extract the id part of the URL using Angular2.

http://localhost:3000/item/187809

我一直在 onInit 中使用 ActiveRoute 但没有运气

I have been playing around with ActiveRoute within onInit but without luck

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

也尝试订阅这样的路由更改

Also tried subscribing to route change like this

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

但是 params 只是一个空对象.

but params is just an empty object.

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

I am defining the route as a lazy route like this

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

我认为问题在于我有一个头组件和一个包含延迟加载的路由子组件的主组件.我正在尝试在标头组件中加载 id.

I think the problem is that I have a header component and a main component which holds the lazy loaded routed child. I am trying to load the id inside the header component.

知道缺少什么吗?

推荐答案

订阅和取消订阅路由参数

Subscribing and Unsubscribing to Route Parameters

1. 确保你已经配置了一个需要像这样的参数的路由:

1. Make sure you have configured a route that expects a parameter like so:

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

为您的路由订阅声明一个变量.导入 ActivatedRoute(不是 ActiveRoute)并将其注入到您的组件构造函数中.

Declare a variable for your route subscription. Import ActivatedRoute (not ActiveRoute) and inject it in your component constructor.

 private routeSub: Subscription;
 constructor(private route: ActivatedRoute) { }

在同一个组件中的 ngOnInit 中，您可以像这样订阅 params observable 中的数据:

Inside ngOnInit in the same component, you can access the data in the params observable by subscribing to it like so:

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

在 ngOnDestroy 中，取消订阅以防止内存泄漏.

Inside ngOnDestroy, unsubscribe to prevent memory leaks.

 ngOnDestroy() {
   this.routeSub.unsubscribe();
 }

更新 - 2021 年 1 月

route.params 和 route.queryParams 之间有很大的区别.

Update - January 2021

There is a big difference between route.params and route.queryParams.

route.params 订阅后，返回一个带有键(来自路由参数，参见步骤 1)和导航时提供的字符串值的对象到路线.例如:

route.params, when subscribed to, returns an object with keys (that come from your route parameters, see step 1) and string values that are provided when navigating to the route. For example:

example.com/item/1

example.com/item/1

{
  itemId: '1'
}

route.queryParams，当订阅时，返回一个带有键和字符串值的对象来自URL 中的查询字符串 (wiki). 例如:

route.queryParams, when subscribed to, returns an object with keys and string values that come from the query string (wiki) in the URL. For example:

example.com/welcome?var1=abc&var2=cde

example.com/welcome?var1=abc&var2=cde

{
  var1: 'abc',
  var2: 'cde'
}

如果 URL 中不存在查询字符串，则

route.queryParams 将是 undefined.我相信OP，评论中的一些用户错误地使用了它而不是route.params.

route.queryParams will be undefined if a query string is not present in the URL. I believe OP, and some users in the comments have mistakenly used this instead of route.params.

这篇关于使用 Angular 从 URL 中提取 id(2+ 直到最新)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！