技術

[Angular] router-outletの外で現在のurlを取得

投稿日:

こんにちは、コーテッグのこやまです。
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のときに表示を変更するというのに使いました。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【ionic】$ionicHistory.clearCache()が効かぬ!

どうも中田です。   ログアウトしたら、viewの情報を初期化したい! …

no image

【Rails】helperからbrタグを含めた文字列を返したい時

こんにちは プライベートではもっぱらRailsを触っています。 触ってからそんな …

[AWS S3] This XML file does not appear to have any style information associated with it. The document tree is shown below.

はじめまして。田中です。 AWSを触りはじめてから1ヶ月ちょっと。七転び八起きな …

no image

【Angular6】画像を拡大したり、ドラッグ移動をできるようにする

こんにちは 画像を拡大したり、ドラッグ移動したい時は結構あるんじゃないでしょうか …

no image

CSSのbackgroundで複数の背景色を設定してみる

こんにちは 仕事で複数の背景色を設定する機会がありましたので 今回はそのやり方を …