やっほー
【AngularCLI】遷移先のURLを取得する方法!

【AngularCLI】遷移先のURLを取得する方法!

  • 2018年12月22日
  • 2021年4月7日
  • Angular
  • 429view
早速ですが今回やりたいことは以下のようなことです。
・例えば「http://localhost:4200/sample」にアクセスして、画面を表示する際に「/sample」部分を取得したい。

この部分を取得できれば、同一コンポーネント内で処理を振り分けたりができます(参照・編集画面の切り替えなど)。

では早速やっちゃいましょう!

泉アイコン
この記事を書いた人
(いずみん)

当ブログ管理者
・エンジニア
・新プログラミング言語『Zero』開発
・保有資格約20個
・投資好き(日本株・仮想通貨)
・オンラインカジノ好き(ルーレット)
・47都道府県制覇目指し中
⇒Twitter(@izumin_0401)
⇒Instagram(@izumin0401)

URLを取得するには?

URLを取得するには、「@angular/router」に含まれる「Router」を利用します。

router.url」で簡単にURL部分を取得できます。

全URLを取得したい場合は、「window.location.href」を利用します。

サンプルコード

Router」はconstructorで依存性注入(DI)を行います。

this.router.url」により、URLの「/sample」部分を取得し、その値によりdisabledの値を変更しています。

/sample-reference」というURLの場合、disabledが有効となりボタンが押せなくなります。

URLを取得するメリット

URLを取得するメリットは、同一コンポーネントで画面の状態を切り替えられることでしょう。

同一画面なので1つのコンポーネントで済ましたけど、URLによって参照・編集を切り替えたいという場合に有効です。

おすすめ本

Angularの勉強をするならこの2冊がおすすめです!

まとめ

今回は、AngularにおけるURLの取得方法についてまとめてみました

Angularって意外と情報が少ないし、バージョンがすぐに上がったりするので何が新しいのかも分かりにくいですよね。。

ってことでまた会いましょう!

きも男
ばいばいきーん
【AngularCLI】遷移先のURLを取得する方法!
フォローしてもらえると泣いて喜びます