web-dev-qa-db-ja.com

Angular2に戻っているユーザーを検出するにはどうすればよいですか？

コンポーネントがあり、ユーザーがブラウザの戻るボタンを押して戻って移動したかどうかを検出する必要があります。

現在、ルーターイベントをサブスクライブしています。

constructor(private router: Router, private activatedRoute: ActivatedRoute) {

    this.routerSubscription = router.events
        .subscribe(event => {

            // if (event.navigatesBack()) ...

        });

}

window.onpopstateを使用できることは知っていますが、Angular2を使用するときはハックのように感じます。

angulartypescriptangular2-routing
40
Michał Pietraszko

PlatformLocationリスナーを持つonPopStateを使用することができます。

import { PlatformLocation } from '@angular/common'

(...)

constructor(location: PlatformLocation) {

    location.onPopState(() => {

        console.log('pressed back!');

    });

}

(...)
34
Michał Pietraszko

IMOのpopstateイベントをリッスンするより良い方法は、位置情報サービスに登録することです

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

constructor(private location: Location) { }

ngOnInit() {
    this.location.subscribe(x => console.log(x));
}

PlatformLocationを直接使用しないので（ドキュメントのとおり）、いつでも登録を解除できます。

27
thorin87
import { HostListener } from '@angular/core';

popstateオブジェクトでwindowをリッスンします。

  @HostListener('window:popstate', ['$event'])
  onPopState(event) {
    console.log('Back button pressed');
  }

このコードは、最新のAngular 2で機能します。

15
VSO

Thorin87の回答として、PlatformLocationを使用しないでください。購読を解除する必要があります。

import {Subscription} from 'rxjs/Subscription';    

ngOnInit() {
  this.subscription = <Subscription>this
    .location
    .subscribe(() => x => console.log(x));
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}
1
omi5489