web-dev-qa-db-ja.com

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

Angular 2を使用してWebサイトを開発しています。Angular 2？

ありがとう

javascriptangularback-button
10
DAN

これが既にソートされているかどうかはわかりませんが、それでも将来の参考のために回答を投稿します。これに取り組むには、基本的にアプリコンポーネントにリスナーを追加し、角度ルーターに canDeactivate ガードを設定する必要があります。

// 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;
  }
}
17
Jithin Nair

これは非常に単純な次のコードを使用します。このサンプルコードはプレーンJavaScriptからのもので、これをangularに変換し、2〜3プロジェクトで使用しています。

// Inject LocationStrategy Service into your component
    constructor(
        private locationStrategy: LocationStrategy
      ) { }


// Define a function to handle back button and use anywhere
    preventBackButton() {
        history.pushState(null, null, location.href);
        this.locationStrategy.onPopState(() => {
          history.pushState(null, null, location.href);
        })
      }

どのサービスでもpreventBackButtonを定義し、そこから呼び出すことができます

3
Nishant Singh
import { LocationStrategy } from '@angular/common';
constructor( private location: LocationStrategy){  
// preventing back button in browser implemented by "Samba Siva"  
 history.pushState(null, null, window.location.href);  
this.location.onPopState(() => {
  history.pushState(null, null, window.location.href);
});  
}

angle2/4/5で100％正常に動作します

1
Ellanki samba siva

これはAngular2関連の問題ではありません。ユーザーを履歴に戻すことができます。 ブラウザの履歴の操作 、history.go()メソッド固有を参照してください：

window.history.go(-1);

ただし、ブラウザウィンドウで[戻る]ボタンを押したときにデフォルトのブラウザアクションをキャンセルまたは無効にする方法は、非常に簡単に悪用される可能性があるためだとは思いません。

別の方法として、ユーザーがページを離れようとするときにダイアログウィンドウを表示できます。 ページを離れる前のjavascript

1
martin

これを試して

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

ここで、「ページ名」をページ名に変更し、これをページのヘッドセクションに配置します。

1
Vishal Rajole

おそらく少し遅いかもしれませんが、誰かが使用できるかもしれません。これは、各タブがコンポーネントであるタブ（ブートストラップ4スタイル）を含むページに使用するソリューションです。

    @Injectable()
    export class CanNavigateService {

      private static _isPermissionGranted = true
      public navigationAttempt = new Subject<boolean>()

      //-------------------------------------------------------------//

      /**Will the next navigation attempt be permitted? */
      updatePermission(isPermissionGranted: boolean) {   
        CanNavigateService._isPermissionGranted = isPermissionGranted
      }//updatePermission

      //-------------------------------------------------------------//

      /**Broadcast the last attempt and whether it was permitted */
      updateNavigationAttempt(wasPermissionGranted: boolean) {    
        this.navigationAttempt.next(wasPermissionGranted)
      }//updatePermission

      //-------------------------------------------------------------//

      /**Can we navigate? */
      public isPermissionGranted(): boolean {
        return CanNavigateService._isPermissionGranted
      }//isPermissionGranted

    }//Cls

NavigationGuardは上記の@Jithin Nairに似ていますが、ナビゲートの試行が行われたとき、および許可されたかどうかもブロードキャストします。 CanNavigateServiceのサブスクライバーは、これを使用して、戻るナビゲーションの代わりに何をするかを決定できます。

@Injectable()
export class NavigationGuard implements CanDeactivate<any> {

constructor(private canNavigateService: CanNavigateService) { }

//--------------------------------------------------------------------//

// will prevent user from going back if permission has not been granted
canDeactivate(component: any) {

    let permitted = this.canNavigateService.isPermissionGranted()
    this.canNavigateService.updateNavigationAttempt(permitted)        

    if (!permitted) {
        // Push current state again to prevent further attempts.
        history.pushState(null, null, location.href)
        return false
    }

    return true

}//canDeactivate

}//Cls

使用法：

constructor(private _navigateService: CanNavigateService) {
    super()

    _navigateService.navigationAttempt.subscribe(wasPermitted => {
        //If navigation was prevented then just go to first tab
        if (!wasPermitted)
           this.onTabSelected( this._firstTab)            
    })
}//ctor

//----------------------------------------------------------------------------//

onTabSelected(tab) {

    this._selectedTab = tab
    //If it's not the first tab you can't back navigate
    this._navigateService.updatePermission(this._selectedTab == this._firstTab)
}//onTabSelected
0
Shanie

この問題はIEブラウザで発生します。以下のコードを使用して問題を解決してください。


        @HostListener('document:keydown', ['$event'])
          onKeyDown(evt: KeyboardEvent) {
            if (
                evt.keyCode === 8 || evt.which === 8
            ) {
              let doPrevent = true;
              const types =['text','password','file','search','email','number','date','color','datetime','datetime-local','month','range','search','tel','time','url','week'];
              const target = (<HTMLInputElement>evt.target);

          const disabled = target.disabled || (<HTMLInputElement>event.target).readOnly;
          if (!disabled) {
            if (target.isContentEditable) {
              doPrevent = false;
            } else if (target.nodeName === 'INPUT') {
              let type = target.type;
              if (type) {
                type = type.toLowerCase();
              }
              if (types.indexOf(type) > -1) {
                doPrevent = false;
              }
            } else if (target.nodeName === 'TEXTAREA') {
              doPrevent = false;
            }
          }


        if (doPrevent) {
            evt.preventDefault();
            return false;
          }

        }
    }
0
Vijay Gawade

ルートに到達しないようにするには、ルーティングコンポーネントに @ CanActivate（） デコレータを追加します。

@Component({selector: 'control-panel-cmp', template: `<div>Settings: ...</div>`})
@CanActivate(checkIfWeHavePermission)
class ControlPanelCmp {
}

こちらもご覧ください
- 角度2：グローバルサービスへのアクセスのために、@ CanActivateに依存関係を挿入しますか？ 。
- Angular2ルーター-app.tsでcanActivateを使用する方法は誰でも知っているので、ログインしていない場合はホームページにリダイレクトできます

0
Günter Zöchbauer