Angularのロケーションサービスの使用

Location は、Angular 2+アプリで利用できるサービスであり、現在のURLパスと簡単にやり取りできます。 ほとんどのナビゲーションのニーズには、 Angularルーターが正しいソリューションですが、ルーターを使用せずにURLに影響を与えるためにロケーションサービスが必要な場合もあります。 さらに、ロケーションサービスは、特定の操作を実行するためにルーターと組み合わせると非常に便利です。

ロケーションサービスの使用

ロケーションサービスにアクセスするには、LocationStrategyおよびPathLocationStrategyを使用して@angle / common からインポートし、プロバイダーのリストにメンバーを追加して挿入しますコンストラクターの場所：

// ...
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

@Component({
  ...
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
})
export class AppComponent {
  constructor(private location: Location) { }

  // ...
}

前後に移動

ナビゲーションでメソッドを前後に移動させたいとしましょう。

goBack() {
  this.location.back();
}

goForward() {
  this.location.forward();
}

現在のパスを取得する

Location.path メソッドを使用して、現在のパスを取得できます。

getPath() {
  console.log(this.location.path());  
}

ロケーションサービス+ルーター

Angularルーターにはeventsメソッドがあり、ナビゲーションの変更をリッスンするためにサブスクライブできるオブザーバブルを返します。 ユーザーがルートパスにいる場合、URLの変更をリッスンし、isRootメンバー変数をtrueに設定するとします。

isRoot: boolean;

ngOnInit() {
  this.router.events.subscribe(event => {
    if (this.location.path() !== '') {
      this.isRoot = false;
    } else {
      this.isRoot = true;
    }
  });
}

上記の例では、 @angular /routerからルーターをインポートして挿入することを忘れないでください。

---

ロケーションサービスには、さらにいくつかの便利な方法があります。 これらすべてのメソッドについて、指定されたURLは最初にアプリケーションのベースhref値に対して正規化されることに注意してください。

• go ：指定されたURLを変更し、ブラウザの履歴に追加します。
• replaceState ：指定されたURLに変更を加え、履歴の最上位のURLを置き換えます。 これにより、ユーザーが戻った場合に、ユーザーが使用していたURLではなく、前のURLに戻るようになります。
• isCurrentPathEqualTo ：指定された2つのパス値を比較して、それらが等しいかどうかを確認します。
• normalize ：パスを取得し、正規化されたパスを返します。