显示对话框时阻止用户输入的Angular 4（或纯javascript）解决方案？

我正在Angular 4中开发一个安全敏感（支付）应用程序。 系统具有不活动的超时条件。当达到超时时，会弹出一个对话框，告诉用户由于不活动需要重新登录

显示对话框时，用户可能会右键单击以打开上下文菜单并从对话框中导航。关键输入也是如此

因此，我禁用了这两个选项（仅当对话框显示时）：

这样可以很好地工作，并防止在显示对话框时进行任何导航

但是，有一项工作我想避免： 如果在弹出超时对话框之前打开关联菜单，则该关联菜单在对话框处于活动状态时保持活动状态，并允许用户导航离开（选择“上一步”或“重新加载”）

有没有办法关闭对话框组件中打开的上下文菜单？ 或者以任何其他方式阻止该场景（除了完全阻止上下文菜单之外）？

---

显然，我无法禁用鼠标事件，否则用户无法激活超时对话框上的按钮。

在Angular 2+中，您可以捕获任何事件，如：

<div (anyEventName)="whateverEventHandler($event)">
</div>

注意，$event是可选的，函数的返回是事件处理程序的返回，因此可以返回false；避免事件中的默认浏览器操作

在您的情况下，事件名称是contextmenu。因此，您的代码可以是这样的：

app.component.html：

右击
{{nRightClicks}}
时间。

app.component.ts`

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
右击
{{nRightClicks}}
时间。
`,
//只是为了让事情在浏览器中变得显而易见
风格：[`
div{
背景：绿色；
颜色：白色；
空白：预处理；
高度：200px；
宽度：200px；
}
`]
})
导出类应用程序{
nRightClicks=0；
构造函数（）{
}
onRightClick（）{
这个.nRightClicks++；
返回false；
}
}

下面是一个完整的工作示例：

---

作为新页面打开对话框怎么样。控制用户输入的一个技巧是用一个透明的div覆盖整个页面，但我不确定这是否有助于您在这种情况下是否在路由上使用auth-guard？即使上下文菜单边缘大小写不是问题，用户仍然可以单击浏览器中的“后退”按钮。我将为每个路由添加一个auth-guard，用于检查用户是否经过身份验证。然后，每当用户向前、向后或重新加载时，都会运行“身份验证卫士”，如果用户未通过身份验证，则会将其踢回登录页面。在弹出初始化时启动上下文菜单的关闭事件。@独裁者：当然，但我不知道如何操作。请发布一个代码示例。@hholtij您可以发布您已经完成的代码吗？谢谢您花时间，Devansh。但是，我在问题中说，我希望避免完全禁用上下文菜单，这就是您的解决方案所做的。

<div (anyEventName)="whateverEventHandler($event)">
</div>

<div (contextmenu)="onRightClick($event)">
      Right clicked
      {{nRightClicks}}
      time(s).
    </div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div (contextmenu)="onRightClick($event)">
      Right clicked
      {{nRightClicks}}
      time(s).
    </div>
  `,
  // Just to make things obvious in browser
  styles: [`
    div {
      background: green;
      color: white;
      white-space: pre;
      height: 200px;
      width: 200px;
    }
  `]
})
export class App {
  nRightClicks = 0;

  constructor() {
  }

  onRightClick() {
    this.nRightClicks++;
    return false;
  }
}