CODEWITHSUNDEEP
angularangular2-routing
gsiradze
gsiradze

Reputation: 4733

get current url outside of router-outlet

I want to get current url. For that I'm doing 

constructor(public router: Router) { ... }
ngOnInit() { console.log(this.router.url); }

and it works ok. But now I want to move it to layout component which is parent of every component. And I have <router-outlet></router-outlet> inside of layoutcomponent.

When I log this code inside of layout component it logs: /

what can I do?

Upvotes: 1

Views: 4999

Answers (4)

Arul
Arul

Reputation: 1426

If you're using event.url directly on events subscribe function angular throws error

Property 'url' does not exist on type 'Event'

Property 'url' does not exist on type 'RouteConfigLoadStart'.

So better you've to use the following to avoid such error: First you have to import Event, Router from @angular/router

import { Router, Event } from "@angular/router"; // Include in the top of your component

Then inject Router in your constructor to access the current state

constructor(private router: Router){}

Finally, You've to check event is the instance of NavigationEnd, add your this code inside ngOnInit() function

this.subscription = this.router.events.subscribe((event:Event) => {
    if(event instanceof NavigationEnd ){
        console.log(event.url);
    }
});

Upvotes: 1

lailahw
lailahw

Reputation: 1

You can try this:

import { Router, NavigationEnd  } from '@angular/router'; 
constructor( private router: Router) {} 
ngOnInit() {
    this.router.events.subscribe(e => {
     if (e instanceof NavigationEnd) {
       console.log(e.url);
      }
    });
}

Upvotes: 0

Sudheer KB
Sudheer KB

Reputation: 1606

You can use a Router event and subscribe to it

constructor(router: Router) {
    this.router.events.subscribe((event: Event) => {
        console.log(event.url); // This will give you the required url
    });
}

Upvotes: 4

cjn
cjn

Reputation: 1461

The routers approach already mentioned is an effective one to get the relative url in your app. For instance, if you have a local site: http://localhost:3000/my/fine/site

Taking the approach already mentioned in the first answer of subscribing to the router events and logging the updated value is useful for getting the Relative path in your app:

constructor(router: Router) {
this.router.events.subscribe((e: Event) => {
            console.log("Relative URL is: ", event.url);
    });
}

Relative URL is: /my/fine/site

If you want to get the FULL url, you can always use vanilla JS in your angular app like:

console.log("FULL URL is: ", window.location.href);

FULL URL is: http://localhost:3000/my/fine/site

The drawback of that is that it's not a subscribed value, so it doesn't get updated on view changes (changes that don't reload the window)... unless you combine the event listener with the vanilla JS url, giving you easy access to the current value of either:

constructor(router: Router) {
this.router.events.subscribe((e: Event) => {
            console.log("Relative URL is: ", event.url);
            console.log("Updated FULL URL is: ", window.location.href);
    });
}

Relative URL is: /my/fine/site/pagechange

Updated FULL URL is: http://localhost:3000/my/fine/site/pagechange

This came in handy when I wanted the current full url for a social sharing link, but was outside of the router-outlet. There is some talk that Angular may address the lack of convenience in getting url & params outside of a router outlet (currently have to do a little bit of walking the tree - which can be brittle). https://github.com/angular/angular/issues/11023

Upvotes: 1

Related Questions