Angular2 get ActivatedRoute url

问题

I want to get the url which comes from this:

this.router.navigate(./somepath, { relativeTo: this.route })

this.route is of the type ActivatedRoute.

I tried url: string = route.snapshot.url.join(''); but this gives an empty string.

回答1:

You can use the activated route to get active URL.

import { ActivatedRoute } from '@angular/router';
 constructor(
    private activatedRoute: ActivatedRoute) {
    console.log(activatedRoute.snapshot['_routerState'].url); 
}

回答2:

This should help:

constructor(router: Router) {
  const url = router.url;
}

回答3:

Where are you trying to use it?

Since you're using route, which get injected in the constructor, you can't use route directly in the property init. So you need to do it in or after the constructor have been called. So something like this should work:

export class Test {
    url: string
    constructor(private route: ActivatedRoute) {
        this.url = route.snapshot.url.join('');
    }
}

The official documentation shows a different way to get the current url: https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html which is async, so maybe it's not what you're after. Hope this helps :)

回答4:

I had a similar problem, i wanted to store de string from the current url! there were many solution but none helped me, then o found how to do this in pure Js, so i try the same line of code in angular, then it worked!!

window.location.href

but what really helped me was this:

window.location.pathname;

for example:

currentRout: string;

ngOnInit() {
this.currentRout = window.location.href;
console.log(this.currentRout);
}

I know it's an old post but..... carry on!!

回答5:

I got it like this:

import { filter, take } from 'rxjs/operators';

constructor(
  private router: Router
) {
  this.router.events.pipe(
    filter(event => event instanceof ChildActivationEnd),
    take(1),
  ).subscribe(event=>{
    const url = event.snapshot['_routerState'].url;
    console.log('url', url);
  });
}

回答6:

For me the following works:

const url = '/' + this.route.pathFromRoot.map(r => r.snapshot.url).filter(f => !!f[0]).map(([f]) => f.path).join('/');

This manually traverses through all parent routes and collects the result URL.

No hacks, no using of private properties. Works for lazy loaded modules.

回答7:

I'm able to get the current page URL using the following code snippet

constructor(private activatedRoute: ActivatedRoute){}

const url = this.activatedRoute['_routerState'].snapshot.url;

回答8:

I got it without being quite as hacky. I used lodash for flattening the array also.

_.flatten(this.route.pathFromRoot.map(route => route.snapshot.url)).join('/')

回答9:

This one works for me and takes into account the full path from root.

Adding the flat() function where the nested array is returned helped with the subsequent map function. It just had to deal with flat array instead of somehow dereferencing a nested array in the 2nd map call.

'/' + route.pathFromRoot.map(r => r.snapshot.url).flat().map(f => f.path).join('/')

来源：https://stackoverflow.com/questions/40153045/angular2-get-activatedroute-url

标签

angular

angular-routing