web-dev-qa-db-ja.com

Angular2はActivatedRoute URLを取得します

これから来るURLを取得したい：

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

_this.route_はActivatedRoute型です。

url: string = route.snapshot.url.join('');を試しましたが、これは空の文字列になります。

angularangular-routing
12
Robin Dijkhof

アクティブ化されたルートを使用してアクティブなURLを取得できます。

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

これは役立つはずです：

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

どこで使用しようとしていますか？

コンストラクターに挿入されるルートを使用しているため、プロパティinitで直接ルートを使用することはできません。したがって、コンストラクターが呼び出された後、または呼び出された後にそれを行う必要があります。したがって、次のようなものが機能するはずです。

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

公式ドキュメントには、現在のURLを取得する別の方法が示されています。 https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html これは非同期です多分それはあなたが望んでいるものではありません。お役に立てれば ：）

4
JonasMH

私は同様の問題を抱えていました、私は現在のURLから文字列を保存したかった！多くの解決策がありましたが、私を助けてくれなかったので、純粋なJsでこれを行う方法を見つけたので、同じコード行を角度で試してみて、それが機能しました！

window.location.href

しかし、本当に私を助けたのはこれでした：

window.location.pathname;

例えば：

currentRout: string;

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

私はそれが古い投稿であることを知っていますが.....続けてください!!

2
matmany

私にとっては、次の作品：

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

これは、すべての親ルートを手動でトラバースし、結果のURLを収集します。

ハッキング、プライベートプロパティの使用はありません。遅延ロードされたモジュールで動作します。

1
smnbbrv

私はこのようになった：

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);
  });
}
1
Alex Po

次のコードスニペットを使用して現在のページのURLを取得できます。

constructor(private activatedRoute: ActivatedRoute){}

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

私はかなりハックすることなくそれを手に入れました。配列の平坦化にもlodashを使用しました。

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