早速ですが、今回やりたいことは以下のようなことです。
・例えば「http://localhost:4200/sample」にアクセスして画面を表示する際の「/sample」部分を取得したい。
この部分を取得できれば、同一コンポーネント内で処理を振り分けたりができるわけです(参照・編集画面の切り替えなど)。
では早速やっちゃいましょう！
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; } } |
「Router」はconstructorで依存性注入(DI)を行います。
「this.router.url」により、URLの「/sample」部分を取得し、その値によりdisabledの値を変更しています。
※「/sample-reference」というURLの場合、disabledが有効となりボタンが押せなくなります。
URLを取得するメリット
URLを取得するメリットは、同一コンポーネントで画面の状態を切り替えられることでしょう。
同一画面なので一つのコンポーネントで済ましたけど、URLによって参照・編集を切り替えたいという場合に有効です。
おすすめ本
Angularの勉強をするならこの2冊がおすすめです！
まとめ
今回は、AngularにおけるURLの取得方法についてまとめてみました。
Angularって意外と情報が少ないんですよね。
特に、バージョンがすぐに上がったりするので何が新しいのかも分かりにくいです。。
今回の内容を記事にしたのもなかなか情報が出てこなかったからです。
少しでも参考になってくれれば幸いです。
