有没有办法防止在整个角度 2/4/5 Web 应用程序中进行退格导航

Question

我需要限制整个应用程序中的退格导航。是否有任何解决方案，即我可以在单个磁贴下为我的整个应用程序执行的操作？

Answer 1

我正在研究 Angular 6 应用程序，并在 Internet Explorer (IE( 上遇到同样的问题。

我正在互联网上搜索解决方案，然后在 JQuery 中找到了一个解决方案。不知何故，我设法将其转换为 Angular。

此代码段解决了该问题。

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

Answer 2

LokiSinclair为AngularJS提出的解决方案也应该可以调整以与Angular 5一起使用。基本解决方案只是防止密钥事件，因此您可以在 AppComponent 中输入一个 HostListener，该 HostListener 全局处理此问题：

@HostListener('document:keydown', ['$event'])
onKeyDown(evt: KeyboardEvent) {
  if (
    evt.which === 8 && 
    ( evt.target.nodeName !== "INPUT" && evt.target.nodeName !== "SELECT" ) 
  ) { 
    evt.preventDefault();
  }
}

防止退格键在 AngularJS 中导航回的一般逻辑的学分，只是将其转换为 Angular 5 实用程序。

Answer 3

使用路由器防护，我们可以阻止用户访问他们不允许访问的区域，或者，我们可以在离开某个区域时要求他们确认。若要控制用户是否可以导航到或离开给定路由，请使用这些路由防护。

您可以使用以下两者中的任何一个：

可以激活检查用户是否可以访问路由。

坎特停用检查用户是否可以退出路由。

在这里，你的偏好是不允许回去。我已用于登录条件。我正在为您提供我的示例代码。它可能会对你有所帮助。

       import { Injectable } from '@angular/core';
      import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
      import { AuthenticateService } from '../authenticate.service';
      import { Observable } from 'rxjs';
      @Injectable({
        providedIn: 'root'
      })
      export class LoginAuthService implements CanActivate {
        constructor(
          private checkLogin: AuthenticateService,
          private router: Router) { }
        canActivate(
          route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
            // This isLoggedIn flag is set when the token is found after login
            if (!this.checkLogin.isLoggednIn()) {                 
              return true;
            } else {
              this.router.navigate(['/componentOfMyChoice']);
            }
        }
      }

然后我像这样在路由中使用它

    { path: 'login', component: LoginComponent , canActivate: [LoginAuthService]},

因此，当用户登录时，除非您注销，否则您无法返回登录页面。希望对您有所帮助