web-dev-qa-db-fra.com

Comment désactiver le bouton Précédent du navigateur dans Angular 2

Je développe un site Web avec Angular 2 . Existe-t-il un moyen de désactiver ou de déclencher le bouton Précédent du navigateur avec Angular 2? 

Merci

javascriptangularback-button
7
DAN

Je ne sais pas si cela est déjà trié, mais nous affichons néanmoins la réponse pour les références futures . Pour résoudre ce problème, vous devez en principe ajouter un écouteur dans votre composant d'application et configurer un canDeactivate guard sur votre angulaire- routeur.

// 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;
  }
}

8
Jithin Nair

Ce n'est pas un problème lié à Angular2. Vous pouvez renvoyer l'utilisateur dans l'historique. Voir Manipulation de l'historique du navigateur , history.go() méthode particulière:

window.history.go(-1);

Cependant, je ne pense pas qu'il soit possible d'annuler ou de désactiver l'action du navigateur par défaut en appuyant sur le bouton Précédent dans la fenêtre du navigateur, car cela pourrait facilement être utilisé de manière abusive.

Vous pouvez également afficher une boîte de dialogue lorsque l'utilisateur tente de quitter la page: javascript avant de quitter la page

1
martin

Un peu en retard peut-être, mais peut-être que quelqu'un pourra l'utiliser ... C'est une solution que j'utilise pour une page avec des onglets (style Bootstrap 4) où chaque onglet est un composant. 

    @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, comme @Jithin Nair ci-dessus, diffuse également les informations relatives à une tentative de navigation et si cela est autorisé. Les abonnés de CanNavigateService peuvent l'utiliser pour décider quoi faire au lieu de la navigation arrière.

@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

Usage: 

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

Ce problème se produit sur le navigateur IE. Utilisez le code mentionné ci-dessous pour résoudre votre problème.


        @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

Si vous souhaitez empêcher l’atteinte d’un itinéraire, vous pouvez ajouter le @CanActivate () decorator à votre composant de routage.

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

Voir également
- Angular 2: Injectez une dépendance dans @CanActivate? pour l'accès aux services globaux.
- Angular2 Router - Tout le monde sait utiliser canActivate dans app.ts afin que je puisse rediriger vers la page d'accueil si je ne suis pas connecté

0
Günter Zöchbauer

Essaye ça

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

où changer 'nom de page' en votre nom de page et le mettre en tête.

0
Vishal Rajole