Question

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

Answer 1

我正在使用Angular 6应用程序，并且在Internet Explorer（IE）上也遇到了同样的问题。

我正在Internet上搜索解决方案，然后在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

为AngularJS提出的LokiSinclair解决方案应该是可调整的，以便与Angular 5一起使用。基本解决方案只是阻止了键事件，因此您可以向AppComponent输入一个HostListener来全局处理它：

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

对Prevent backspace from navigating back in AngularJS的一般逻辑的归属，只是将其翻译为Angular 5实用程序。

Answer 3

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

您可以使用以下两种方式之一：

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

可以停用 检查用户是否可以退出路线。

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

       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]},

因此，当用户登录后，除非您注销，否则您不能返回登录页面。希望对您有帮助

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

3 个答案: