月間18,000PV達成! 収益は毎日発生中! 記事は毎日更新中! ギランバレー症候群に関する情報を集めています

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

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

 

早速ですが、今回やりたいことは以下のようなことです。

・例えば「http://localhost:4200/sample」にアクセスして画面を表示する際の「/sample」部分を取得したい。

 

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

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

 

 

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が有効となりボタンが押せなくなります。

 

 

Advertisement

 

URLを取得するメリット

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

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

 

 

おすすめ本

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

 

 

 

 

まとめ

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

Angularって意外と情報が少ないんですよね。

特に、バージョンがすぐに上がったりするので何が新しいのかも分かりにくいです。。

今回の内容を記事にしたのもなかなか情報が出てこなかったからです。

少しでも参考になってくれれば幸いです。

 

Travelerを知らないの?