Angular

Question

我正在使用生成 angular 代码的 RAD 工具，我想对特定行为进行一些修改。

我有一个网格，我可以通过单击按钮进入特定行的 "edit" 模式，现在一旦进入编辑模式，我想完全禁用包含该行的 div 之外的鼠标单击grid，因为如果用户点击了grid之外的一些组件，在保存他的编辑之前，会导致一些bug。

所以当 "Edit" 按钮被点击时，我想停止特定 div 之外的鼠标事件，一旦 "Save" 按钮被点击，我想再次允许鼠标事件无处不在。

我没有要显示的代码，因为它只是一些带有一些按钮标签的 html 代码。

我正在寻找的解决方案只是知道这样做的正确方法是什么，然后我可以自己实现它

Answer 1

您可以执行以下操作。查看代码，找到(click)事件，将MouseEvent的引用传递给这个事件。

模板：

<div (click)="stopEvent($event)"></div>

然后调用：

stopEvent(e: MouseEvent) {
  e.stopPropagation();
}

另一种解决方案是向 div 标签添加禁用：

<div [disabled]="true"></div>

Answer 2

如果您将事件传递到您的方法中，您可以调用 stopPropagation 以防止它落到它后面的元素中；


    (click)="myMethod($event)"

    myMethod(event: any){
      event.stopPropagation();
      ...
    }

或者，您可以直接在模板上调用 stopPropagation


    (click)="myMethod(); $event.stopPropagation()"

您可以通过将其与您必须设置编辑模式的任何变量组合来使其成为条件，即

    this.editMode && event.stopPropagation()

Answer 3

据我了解，您只想在 div 之外停止传播...因此，如果您在 div 中单击，则单击会产生效果；否则传播将停止。你需要使用 HostListener （这里是官方文档https://angular.io/api/core/HostListener）

这样试试：

<div #myDIVName (click)="stopEvent($event)"></div>

并在您的组件中，使用 ViewChild 装饰器声明一个变量

@ViewChild('myDIVName') myDIVName;

并添加此功能

@HostListener('document:click', ['$event'])
  public onClick(event) {
    try {
      if (this.disableOutsideClick &&   !this.myDIVName.nativeElement.contains(event.target)) {
        event.stopPropagation():
        }
    } catch (e) {
        console.log(e);
        }
    }

Angular - 如何根据条件禁用特定 DIV 之外的鼠标单击事件？

Angular - How to disable mouse click events outside a specific DIV based on a condition?

mouseevent