LocationStrategy サービスを使用する

Angularで現在のURLを取得する方法

location オブジェクトを使用する

方法

import { Location } from '@angular/common';

constructor(private location: Location) {}

getCurrentUrl(): string {
  return this.location.href;
}

利点

• シンプルで分かりやすい
• すべてのコンポーネントで利用可能

欠点

• URLの変更を検知するには、ポーリングが必要
• ハッシュフラグメントを含まないURLを取得する

ActivatedRoute サービスを使用する

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

getCurrentUrl(): string {
  return this.route.snapshot.url.join('/');
}

• URLの変更を自動的に検知できる

• ActivatedRoute サービスは、ルーティングされたコンポーネントでのみ利用可能

Router サービスを使用する

import { Router } from '@angular/router';

constructor(private router: Router) {}

getCurrentUrl(): string {
  return this.router.url;
}

LocationStrategy サービスを使用する

import { LocationStrategy } from '@angular/common';

constructor(private locationStrategy: LocationStrategy) {}

getCurrentUrl(): string {
  return this.locationStrategy.path();
}

• 複雑なコード

どの方法を選択するべきかは、具体的な要件によって異なります。 以下の点を考慮する必要があります。

• URLの変更を検知する必要があるかどうか
• コンポーネントの種類

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  private currentUrl: string;

  constructor(private location: Location) {}

  ngOnInit() {
    this.currentUrl = this.location.href;
  }

}

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  private currentUrl: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.currentUrl = this.route.snapshot.url.join('/');
  }

}

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  private currentUrl: string;

  constructor(private router: Router) {}

  ngOnInit() {
    this.currentUrl = this.router.url;
  }

}

import { Component, OnInit } from '@angular/core';
import { LocationStrategy } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  private currentUrl: string;

  constructor(private locationStrategy: LocationStrategy) {}

  ngOnInit() {
    this.currentUrl = this.locationStrategy.path();
  }

}

これらのサンプルコードは、`

現在のURLを取得するその他の方法

const currentUrl = window.location.href;

• 非常にシンプル

• Angular の機能に依存していない
• テストが難しい

document.URL プロパティを使用する

const currentUrl = document.URL;

URL パラメータを取得する

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const currentUrl = this.route.snapshot.paramMap.get('id');
}

• 特定のパラメータのみを取得できる

• URL全体を取得できない

サブスクリプションを使用する

import { Router, NavigationEnd } from '@angular/router';

constructor(private router: Router) {}

ngOnInit() {
  this.router.events.subscribe((event) => {
    if (event instanceof NavigationEnd) {
      const currentUrl = event.url;
    }
  });
}

• コードが複雑になる

• シンプルさを求めるかどうか
• テストしやすさを求めるかどうか