Question

我有mat-form-field组件，需要检测其外部的点击。当它打开并且我单击任何复选框时，它将识别为外部单击并关闭下拉列表。我尝试使用event.stoppropogation（），但是它不起作用。单击mat选项时，如何防止onCancelClick（）函数。

List<T>

Answer 1

这可能与CSS规则有关。如果检查您的mat-form-field元素，您会发现它没有尺寸。也许如果您赋予它一些属性，例如min-height：1px，width：100％，position：relative，它将获得尺寸，并且您可以单击它的内部而不会被检测为外部单击。

Answer 2

我使用两种方法来跟踪元素上的点击，另一种跟踪外部点击

@Directive({
  selector: '[appClickOutside]'
})
export class ClickOutsideDirective {

  @Output() clickElsewhere = new EventEmitter<MouseEvent>();

  constructor(private eRef: ElementRef) {
  }

  @HostListener('document:click', ['$event']) onDocumentClick(event) {
    this.clickElsewhere.emit()
  }

  @HostListener('click',['$event']) onClick(e:MouseEvent) { 
    e.stopPropagation();
  }

}

模板

<div id="control" appClickOutside (clickElsewhere)="showMessage()" >
</div>

stackblitz example

Answer 3

我有一个丑陋的解决方法可以完成这项工作，

诀窍是检查是否在mat-form-field元素上存在以mat为焦点的类。

'isInputFocused'布尔变量用于触发我们专注于输入的时间

<div #matFormFieldParent>
    <mat-form-field class="input-amount mat-form-field">

然后在您的组件中：

import {
  AfterViewChecked,
  ElementRef,
  ViewChild
} from '@angular/core';


export class YourComponent implements AfterViewChecked {


  @ViewChild('matFormFieldParent') matFormFieldParentElement : ElementRef;
  isInputFocused: boolean;

  constructor() {
    this.isInputFocused = false;
  }

  ngAfterViewChecked() {
    this.inputFocusProcess(
      this.matFormFieldParentElement
          .nativeElement
          .querySelector('.mat-form-field.mat-focused'));
  }

  private inputFocusProcess(matFormField: ElementRef): void {
    if (matFormField && !this.isInputFocused) {
      this.isInputFocused = true;
    }

    if (!matFormField && this.isInputFocused) {
      this.isInputFocused = false;

      setTimeout(
        () => {
          //
          // Do what you want when you click outside the input
          //
        });
    }
  }
}

希望它将对某人有所帮助：）

如何检测mat-form-field的外部点击？

3 个答案: