ルータ出口の外に現在のURLを取得する

Question

私は現在のURLを取得したいと思います。私がやっていることのために

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

それはうまくいきます。しかし今、私はすべてのコンポーネントの親であるレイアウトコンポーネントに移動したいと思います。そしてlayoutcomponentの中に<router-outlet></router-outlet>があります。

私はレイアウトコンポーネントの内部でこのコードをログインすると、それが記録されます：/

を私は何ができるのでしょうか？

Answer 1

あなたは、ルータのイベントを使用し、すでに述べたように、ルータのアプローチは、あなたのアプリで相対URLを取得するための効果的な1であることのために

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

Answer 2

を購読することができます。たとえば、あなたがローカルサイトがある場合：

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

：すでにルータのイベントをサブスクライブし、更新された値は、あなたのアプリで相対パスを取得するために有用であるログインの最初の答えで述べたアプローチを取る http://localhost:3000/my/fine/site

を

相対URLは次のとおりです。/私/ファイン/サイト

あなたは完全なURLを取得したい場合、あなたはいつものようにあなたの角度のアプリでバニラJSを使用することができます。

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

FULL URLは次のとおりです。http://localhost:3000/my/fine/site

ことの欠点は、ウィンドウをリロードしていないビューの変更（変更に更新されませんので、それは、サブスクライブされた値ではないということです）...どちらかあなたがあなたの現在値への容易なアクセスを与える、バニラJSのURLでイベントリスナーを組み合わせた場合を除き：

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

相対URLは次のとおりです。/私/ファイン/ SI TE/pagechange

更新FULL URLは次のとおりです。http://localhost:3000/my/fine/site/pagechange

これは私がソーシャル共有リンクの現在の完全なURLを望んでいた時に便利に来たが、ルータ・アウトレットの外でした。 Angularがルータ出口の外にあるURLを取得する際の便宜の欠如に対処しているかもしれないという話があります（現在は、木を歩いて少し脆くなる可能性があります）。 https://github.com/angular/angular/issues/11023