Angular2获取ActivatedRoute网址

时间:2016-10-20 11:22:51

标签: angular angular-routing

我想得到这个来自的网址:

this.route

ActivatedRoute的类型为url: string = route.snapshot.url.join('');

我尝试$(document).ready(function(){ var selArr = [ {val: 'corsair', text: 'Corsair'}, {val: 'evga', text: 'EVGA'}, {val: 'antec', text: 'Antec'} ]; $('#pSupply').append('<select id="psuSel" />').promise().done(function(){ $(selArr).each(function(){ $('#psuSel').append($('<option />').attr('value', this.val).text(this.text)); }); }); }); ,但这会产生一个空字符串。

11 个答案:

答案 0 :(得分:12)

您可以使用激活的路线获取有效的网址。

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

答案 1 :(得分:6)

这应该有所帮助:

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

答案 2 :(得分:4)

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 :)

答案 3 :(得分:1)

我是这样的:

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);
  });
}

答案 4 :(得分:1)

对我来说,以下作品:

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

这会手动遍历所有父级路由并收集结果URL。

没有黑客,没有使用私有财产。适用于延迟加载的模块。

答案 5 :(得分:1)

我使用了Phillip Patton的解决方案,但是IE / Edge不支持flat()函数,因此以下是替代方法:

'/' + this.route.pathFromRoot.map(r => r.snapshot.url).reduce((acc, val) => acc.concat(val), []).map(f => f.path).join('/');

答案 6 :(得分:0)

我可以使用以下代码段获取当前页面的网址

constructor(private activatedRoute: ActivatedRoute){}

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

答案 7 :(得分:0)

我没有那么笨拙就得到它。我也用lodash来使数组变平。

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

答案 8 :(得分:0)

我有一个类似的问题,我想存储当前URL中的字符串!有很多解决方案,但是没有一个对我有帮助,然后o找到了在纯Js中如何执行此操作的方法,所以我尝试了相同的角度代码行,然后成功了!

window.location.href 

但是真正帮助我的是:

window.location.pathname;

例如:

currentRout: string;

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

我知道这是一个旧帖子,但是.....继续!

答案 9 :(得分:0)

这对我有用,并考虑了root的完整路径。

在返回嵌套数组的地方添加flat()函数,有助于后续的map函数。它只需要处理平面数组,而不必在第二个map调用中以某种方式取消对嵌套数组的引用。

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

答案 10 :(得分:0)

  constructor(
      readonly location: Location
  ) 

然后

this.location.path()

这将获得网址