☰

Angular 2でブラウザの戻るボタンを無効にする方法 質問する

tag-icon • tag-icon javascript angular back-button
Angular 2でブラウザの戻るボタンを無効にする方法 質問する

Angular 2 を使用して Web サイトを開発しています。Angular 2 を使用してブラウザの戻るボタンを無効にしたりトリガーしたりする方法はありますか?

ありがとう

ベストアンサー1

すでに解決されているかどうかはわかりませんが、今後の参考のために回答を投稿します。これに対処するには、基本的にアプリコンポーネントにリスナーを追加し、無効化可能角度ルーターのガード。

// in app.component.ts
import { LocationStrategy } from '@angular/common';

@Component({
  selector: 'app-root'
})
export class AppComponent {
  constructor(
    private location: LocationStrategy
  ) {
    // check if back or forward button is pressed.
    this.location.onPopState(() => {
      // set isBackButtonClicked to true.
      this.someNavigationService.setBackClicked(true);
      return false;
    });
  }
}

// in navigation guard
@Injectable()
export class NavigationGuard implements CanDeactivate<any> {
  constructor(private someNavigationService: SomeNavigationService) {}
  canDeactivate(component: any) {
    // will prevent user from going back
    if (this.someNavigationService.getBackClicked()) {
      this.someNavigationService.setBackClicked(false);
      // push current state again to prevent further attempts.
      history.pushState(null, null, location.href);
      return false;
    }
    return true;
  }
}

おすすめ記事