こんにちは、コーテッグのこやまです。
Angularでapp.componentや、そのほか必要なときに、route-outletの外から現在のurlを取得したい場合のコードです。
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
~~
constructor(
private router: Router
) {}
ngOnInit() {
this.router.events
.pipe(filter(e => e instanceof NavigationEnd))
.subscribe((e: NavigationEnd) => {
console.log(e.url) // 現在のパスを出力
});
}
最初は何も考えずにActivatedRouteを使おうとしていましたが、
ドキュメントに以下のようにあるので、使いません。
“Contains the information about a route associated with a component loaded in an outlet.”
https://angular.jp/api/router/ActivatedRoute
router.eventsは16個あったので、filterしないといっぱい出力されてしまします。
1つでいいので、”An event triggered when navigation ends successfully.”のNavigationEndにします。
https://angular.io/guide/router
これで取れます。
私はヘッダーを共通で使って、特定のurlのときに表示を変更するというのに使いました。








