Angular - Как отключить события щелчка мыши вне заданного значения c DIV в зависимости от условия?

Question

Я использую инструмент RAD, который генерирует код angular, и я хочу внести некоторые изменения в конкретное c поведение.

У меня есть сетка, и я могу перейти в режим редактирования для указанной строки c нажатием кнопки, теперь один раз в режиме редактирования, я хочу полностью отключить щелчки мыши вне элемента div, содержащего эту сетку, потому что, если пользователи нажимают на некоторые компоненты вне сетки, перед сохранением его редактирования, вызовет некоторые ошибки.

Поэтому, когда я нажимаю кнопку «Редактировать», я хочу остановить события мыши за пределами указанного элемента c, и как только нажимается кнопка «Сохранить», я хочу чтобы снова разрешить события мыши везде.

У меня нет кода для отображения, так как это был бы просто какой-то код html с некоторыми тегами кнопок.

Решение, которое я ищу, это просто чтобы узнать, как правильно это сделать, я смогу это реализовать самостоятельно

Answer 1

Вы можете сделать следующее. Посмотрите на код и найдите событие (click) и передайте ссылку MouseEvent на это событие.

Шаблон:

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

Затем вызовите:

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

Другим решением было бы добавить отключение к тегу div:

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

Answer 2

Если я понял, вы хотите остановить распространение только вне div ... Так что, если вы нажмете в div, клик будет иметь эффект; иначе распространение будет остановлено. Вам необходимо использовать HostListener (здесь официальная документация https://angular.io/api/core/HostListener)

Попробуйте следующим образом:

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

и в своем компоненте объявите переменную с ViewChild decorator

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

Answer 3

Если вы передаете событие в свой метод, вы можете вызвать stopPropagation, чтобы предотвратить его падение к элементам позади него;

    (click)="myMethod($event)"

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

В качестве альтернативы вы можете вызвать stopPropagation прямо в шаблоне

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

Вы можете сделать это условным, комбинируя его с любой переменной, которую вы должны установить в режиме редактирования, например

    this.editMode && event.stopPropagation()