Angular - How to get URL when using Hash-Strategy?

Question

In my Angular Route, I define that I'm using Hash strategy:

// app-routing-module.ts
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true
    })
  ],
//...

When I want to test the current Router url, I run this code:

import { Router } from '@angular/router';
// ..

constructor(private _router: Router) {}

getUrl() {
  return this._router.url; // always return '/'
}

The this._router.url is always equal to '/'. However, if I test window.location.href, I'm getting a different value (the real full url).

How do I get the current router-url (in the Angular way, not via window object) while using Hash Strategy?

Why router? Why not route snapshot? Not different angular api using with and without hash strategy. — Numichi
– Numichi, Commented Dec 29, 2019 at 18:11
@Numichi - could you post an Answer where you explain how to get the router url with snapshot route — Gil Epshtain
– Gil Epshtain, Commented Dec 30, 2019 at 8:19

benshabatnoam · Accepted Answer · 2019-12-29 21:41:12Z

2

You can use PlatformLocation class like this:

import { PlatformLocation } from '@angular/common';

constructor(private pLocation: PlatformLocation) { }

getUrl() {
  return (pLocation as any).location.href;
}

The reason I coded (pLocation as any) is that location is not showing it typescript intellisense, as you can see it is not showing in Angular docs, but it is there and you can use it.

SIMPLE DEMO

answered Dec 29, 2019 at 21:41

benshabatnoam

7,7403 gold badges37 silver badges55 bronze badges

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

1 Comment

Gil Epshtain Over a year ago

Great. What I was needed was actually platformLocation.hash which was equal to #/page1 (the part after the '#' of the url)

Andrey Durnov · Accepted Answer · 2019-12-29 19:54:39Z

2

You should use ActivatedRoute to get URL as Numichi mentioned

answered Dec 29, 2019 at 19:54

Andrey Durnov

412 bronze badges

1 Comment

Gil Epshtain Over a year ago

Could you add an example of use. How do I get the URL from ActivatedRoute

Collectives™ on Stack Overflow

Angular - How to get URL when using Hash-Strategy?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related