我需要在整个应用程序中限制退格导航。是否有任何解决方案，即我可以在整个应用程序的单个磁贴下执行某些操作？
【问题讨论】：
标签： angular navigation angular5
我正在开发 Angular 6 应用程序，但在 Internet Explorer (IE) 上遇到了同样的问题。
我在互联网上搜索解决方案，然后在 JQuery 中找到了一个解决方案。不知何故，我设法将其转换为 Angular。
这个 sn-p 解决了这个问题。
@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;
}
}
}
【讨论】：
keyCode 和 which 引用，因为它们都已被弃用。相反，我正在检查 $event.key == 'Backspace'.
LokiSinclair 为 AngularJS 提出的解决方案应该可以调整以与 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 实用程序。
【讨论】：
通过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]},
因此，当用户登录时，除非您退出，否则您无法返回登录页面。希望对你有帮助
【讨论】：