早速ですが今回やりたいことは以下のようなことです。
・例えば「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」を利用します。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-sample', template: '<button [disabled]="disabled">ボタン</button>' }) export class SampleComponent implements OnInit { private disabled: boolean; constructor(private router: Router) { } ngOnInit() { (this.router.url === '/sample-reference') ? this.disabled = true : this.disabled = false; } } |
「this.router.url」により、URLの「/sample」部分を取得し、その値によりdisabledの値を変更しています。
「/sample-reference」というURLの場合、disabledが有効となりボタンが押せなくなります。
URLを取得するメリット
URLを取得するメリットは、同一コンポーネントで画面の状態を切り替えられることでしょう。
同一画面なので1つのコンポーネントで済ましたけど、URLによって参照・編集を切り替えたいという場合に有効です。
おすすめ本
Angularの勉強をするならこの2冊がおすすめです！
まとめ
今回は、AngularにおけるURLの取得方法についてまとめてみました。
Angularって意外と情報が少ないし、バージョンがすぐに上がったりするので何が新しいのかも分かりにくいですよね。。
ってことでまた会いましょう！
ばいばいきーん