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 :パスを取得し、正規化されたパスを返します。