Using Angular's ActivatedRoute outside component / without injection

Question

I'm trying to make a helper to get some URL param for me, using ActivatedRoute.

The normal way, injecting ActivatedRoute on component, is working fine, like this:

constructor(
    private route: ActivatedRoute,
    private api: MyApiService
) { }

ngOnInit(): void {
    this.api.getData(this.route.snapshot.paramMap.get("id") || "").subscribe((data: any) => {
        console.log(data);
    }, (error: any) => {
        console.error(error);
    })
}

Now I want to create a helper file with some getIdFromUrl() function that returns the ID string or an empty string, this way:

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

export function getIdFromUrl(): string
{
    var route = new ActivatedRoute();
    var id = route.snapshot.paramMap.get("id");
    return id !== null ? id : "";
}

But can't make this to work and can't figure out why.

Can someone help me with this?

Thanks!

@H3AR7B3A7 this works, but I still need to inject ActivatedRoute on my component's constructor, to pass it as parameter to the getIdFromUrl... Do you know if there's another way that I don't need to inject it on component? — RBFraphael
– RBFraphael, Commented Aug 31, 2021 at 19:44

Faz · Accepted Answer · 2021-08-31 20:32:32Z

0

Outlets have their own ActivatedRoute instance so you won't be able to get it from elsewhere as if it were a singleton.

However with Router it should be possible to do something like this. Here I've done a quick example with a service that can return a param retrieved from the url on one component and one that uses ActivatedRoute.

https://stackblitz.com/edit/angular-ivy-juypes?file=src/app/app.module.ts

Would a similar service work for you or do you not want to inject a service either?

@Injectable()
export class GetParamFromRouteService {
  constructor(private router: Router) {}

  getIdFromRoute(): string {
    return this.router.routerState.snapshot.root.children[0].params['id'] || '';
  }
}

answered Aug 31, 2021 at 20:32

Faz

1941 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Angular's ActivatedRoute outside component / without injection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related