Hi I am trying to extract the id part of the url using Angular2.
http://localhost:3000/item/187809
I have been playing around with ActiveRoute
I suspect the issue is that you're using queryParams
instead of just params
.
params: An Observable that contains the required and optional parameters specific to the route.
queryParams: An Observable that contains the query parameters available to all routes.
so try this:
this.route.params.subscribe(params => {
console.log(params);
console.log(+params['id']);
});
I have faced the same problem while working with Angular 8, and solved it by:
At first, import ActivatedRoute:
import { ActivatedRoute } from '@angular/router';
Then, Inject ActivatedRoute in the constructor:
constructor(private activatedRoute: ActivatedRoute) {}
Your ngOnit method will look like this.
ngOnInit(){
const id = this.activatedRoute.snapshot.paramMap.get('id');
}
I found it from the official documentation of Angular.
Subscribing and Unsubscribing to Route Parameters
Make sure you have configured a route that expects a parameter like so:
{path: 'item/:id', component: SomeItemComponent}
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) { }
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
});
}
Inside ngOnDestroy, unsubscribe to prevent memory leaks.
ngOnDestroy() {
this.routeSub.unsubscribe();
}
There is a big difference between route.params
and route.queryParams
.
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
{
itemId: '1'
}
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
{
var1: 'abc',
var2: 'cde'
}
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
.
this.routeSub = this.route.params.subscribe(params => {
console.log(params);
console.log(+params['id']);
});
You have multi options to get id
constructor(private route: ActivatedRoute) { }
1-With the help of params
const id= this.route.snapshot.params['id'];
or
const id = this.route.snapshot.params.id // any param name after "params"
2-With the help of paramMap
const id= this.route.snapshot.paramMap.get('id')
3-subscribe
to params
(do not forget to unsubscribe)
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()
}
I know I'm a bit late with a reply, but just in case you were still having problem please take a look at the Angular documentation.
angular routing tutorial
Look at the example from the link.
Start by importing ActivatedRoute:
import { ActivatedRoute } from '@angular/router';
Then inject it in the constructor
constructor(private route: ActivatedRoute) {}
And in OnInit()
ngOnInit(): void {
const id = this.route.snapshot.paramMap.get('id');
}
and like this you don't need to worry about any Observables directly.
Hope this helps you.