So deaktivieren Sie die Browser-Zurück-Schaltfläche in Angular 2

Sie sind sich nicht sicher, ob dies bereits sortiert ist, aber die Antwort trotzdem für zukünftige Referenzen bereitstellt. Um dies zu bewältigen, müssen Sie im Grunde einen Listener in Ihrer App-Komponente hinzufügen und ein canDeactivate guard auf Ihrem angle- Router.

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

Verwenden Sie dazu ganz einfach den folgenden Code. Dieser Beispielcode stammt aus einfachem Javascript. Ich habe diesen in angular und in meinen 2-3 Projekten verwendet

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

Sie können preventBackButton auch in jedem Dienst definieren und von dort aus aufrufen

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

es funktioniert gut für mich 100% in Angular2/4/5

Dies ist kein Angular2-Problem. Sie können den Benutzer im Verlauf zurückschicken. Siehe Browserverlauf ändern , history.go() -Methode insbesondere:

window.history.go(-1);

Ich glaube jedoch nicht, dass es eine Möglichkeit gibt, die Standard-Browseraktion beim Drücken der Zurück-Taste im Browserfenster zu deaktivieren oder zu deaktivieren, da dies sehr leicht missbraucht werden kann.

Als Alternative können Sie ein Dialogfenster anzeigen, wenn der Benutzer versucht, die Seite zu verlassen: Javascript vor dem Verlassen der Seite

Ein bisschen spät, aber vielleicht kann es jemand verwenden ... Dies ist eine Lösung, die ich für eine Seite mit Registerkarten (Bootstrap 4-Stil) verwende, bei der jede Registerkarte eine Komponente ist. 

    @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 wie @Jithin Nair oben, sendet aber auch, wann ein Navigationsversuch gemacht wurde und ob dies erlaubt ist. Abonnenten von CanNavigateService können damit entscheiden, was statt der Rückwärtsnavigation zu tun ist.

@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

Verwendungszweck: 

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

Dieses Problem tritt im Browser IE auf. Verwenden Sie den unten angegebenen Code, um das Problem zu beheben.

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

        }
    }

Wenn Sie verhindern möchten, dass eine Route erreicht wird, können Sie den @CanActivate () decorator Ihrer Routingkomponente hinzufügen

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

Siehe auch
- Angular 2: Injizieren Sie eine Abhängigkeit in @CanActivate? für den Zugang zu globalen Diensten.
- Angular2 Router - Jeder kann canActivate in app.ts verwenden, damit ich zur Startseite umleiten kann, wenn er nicht angemeldet ist

Versuche dies

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

dort ändern Sie "Seitenname" in Ihren Seitennamen und geben diesen in den Kopfbereich der Seite ein.