Estoy desarrollando un sitio web con Angular 2.
Hay alguna forma de desactivar o desencadenar el botón atrás del Navegador usando Angular 2?

Gracias

InformationsquelleAutor DAN | 2016-04-01

9 Comentarios

  1. 11

    No estoy seguro si esto ya está ordenada, pero la publicación de la respuesta, no obstante, para futuras referencias.
    Para abordar esto, básicamente tiene que añadir un listener en su aplicación-y de componentes de la instalación de un canDeactivate guardia en su angulares-router.

    JS:

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

    • this.someNavigationService.setBackClicked() lo que será la definición de/aplicación de este método?
  2. 1

    Esto no es Angular2 relacionados con el problema. Se puede enviar al usuario hacia atrás en la historia. Ver Manipular el historial del navegador, history.go() método particular:

    window.history.go(-1);

    Sin embargo, yo no creo que haya una forma de cancelar o desactivar el navegador predeterminado de acción de pulsar de nuevo el botón en la ventana del navegador, ya que podía ser muy fácil de abuso.

    Como una alternativa que puede mostrar una ventana de diálogo cuando el usuario intenta salir de la página: javascript antes de salir de la página

  3. 1

    Esta Muy simple utilizar el siguiente código, Este código de ejemplo es de la llanura de javascript que he convertido esto en angular y utilizando en mi 2-3 proyectos

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

    Puede definir preventBackButton en cualquier servicio y llamar desde allí

  4. 0

    Probar este

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

    donde el cambio ‘pagename’ a su nombre de la página y poner esto en la sección head de la página.

  5. 0

    Si quieres evitar una ruta que se le puede agregar el @CanActivate() decorador a su componente de enrutamiento de

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

    Ver también

    Angular 2: Inyectar una dependencia en @CanActivate? para el acceso a los servicios globales.

    Angular2 Router – Alguien sabe cómo usar canActivate en la aplicación.ts para que yo pueda redirigir a la página de inicio si no ha iniciado sesión en

  6. 0

    Un poco tarde tal vez, pero tal vez alguien pueda usarlo.
    Esta es una solución que yo uso una página con pestañas (Bootstrap 4 estilo) donde cada pestaña es un componente.

        @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 como @Jithin Nair más arriba, sino también las emisiones cuando un intento de navegar se hizo y si era permitido. Los suscriptores de CanNavigateService puede utilizar para decidir qué hacer en su lugar de regresar de navegación.

    @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

    Uso:

    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
  7. 0

    Este problema se produce en el navegador IE. El uso que se mencionan a continuación el código va a resolver su problema.

    
            @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;
              }
    
            }
        }
    
  8. 0
    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);
    });  
    }

    su trabajo bien a mí 100% en angular2/4/5

  9. -2

    paso 1: de Importación Locatoion de angular comunes

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

    paso 2: Activa en el constructor

    private location: Location

    paso 3: Agregar la función en ngOnInit de los respectivos coponent,

    this.location.subscribe(currentLocation => {
    if (currentLocation.url === '*/basic-info*') {
        window.onpopstate = function (event) {
            history.go(1);
        }
    }

    });

    Nota: Aquí /basic-info será reemplazado por su camino.

    Si la primera vez no funciona, trate de añadir fuera de suscribirse,

    let currentUrl = window.location.href;
    let tmpVar = currentUrl.includes('/basic-info');
    if (currentUrl.includes('/basic-info')) {
      window.onpopstate = function (event) {
        history.go(1);
      }
    }

Dejar respuesta

Please enter your comment!
Please enter your name here