モバイルで「戻る」ボタンを使用してコンポーネントを閉じるにはどうすればいいですか？

Question

ポップアップのようなプロファイルコンポーネントを作成しました。コンポーネントはすべてのページに表示できます（ルーティングに依存しません）。私はそれを閉じるにはスマートフォンの "戻る"ボタンだったので、私はHostListener annotation with ウィンドウを使用しました：popstate。それは動作しますが、戻るボタンをクリックするとProfileComponentが終了しますが、ブラウザも前のページに移動します。

@HostListener('window:popstate', ['$event']) 
@HostListener('window:keydown.escape') 
closeProfile(event?: any) { 
    if(event) { 
     event.preventDefault(); 
    } 
    this.store.dispatch(new layoutActions.CloseProfileAction()); 
} 

が、まだ動作しません：私はでpreventDefault（）を使用して、修正を試してみました。 戻るボタンアクションを上書きする方法はありますか？

Answer 1

popstateイベントはキャンセルできません（ここに記載されているとおり：https://developer.mozilla.org/en-US/docs/Web/Events/popstate）。したがってpreventDefaultはこの場合何もしません。

しかし、あなたがページにとどまり、バックボタンを事実上禁止し、プロフィールポップアップを閉じるだけなら、以下を行うことができます。

@HostListener('window:popstate', ['$event']) 
@HostListener('window:keydown.escape') 
closeProfile(event?: any) { 
    history.go(1); 
    this.store.dispatch(new layoutActions.CloseProfileAction()); 
} 

希望します。