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

Posted 2021-04-13

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

    <mat-form-field appClickOutside (clickElsewhere)="onCancelClick($event)">
    <mat-select placeholder="Accounts: {{accountsList.length}}" 
    [formControl]="accountsCtrl" [multiple]="true" #multiSelect>
    <ngx-mat-select-search [formControl]="accountsFilterCtrl">
      <i class="fa fa-close" ngxMatSelectSearchClear></i>
    </ngx-mat-select-search>
    <mat-option *ngFor="let account of accounts | async" [value]="account" 
    (clickElsewhere)="onCancelClick($event)">
      {{account.name}}
    </mat-option>
    <div class="row">
      <div class="col-sm-2"></div>
      <div class="col-sm-10 text-right submit-btn-group">
        <button class="btn btn-link" (click)="onCancelClick()">Cancel</button>
        <button class="btn btn-primary">Apply</button>
      </div>
    </div>
    </mat-select>
    </mat-form-field>

    onCancelClick(e: Event) {
     this.accountsCtrl.setValue(this.accountsList);
     this.multiSelect.close();
    }

    ***This is my directive`***
    @Directive({
    selector: '[appClickOutside]'
    })
    export class ClickOutsideDirective {

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

    constructor(private eRef: ElementRef) {
    }

    @HostListener('document:click', ['$event'])
    public onDocumentClick(event) {
    if (!this.eRef.nativeElement.contains(event.target)) {
      this.clickElsewhere.emit(event);
    } else {
      event.preventDefault();
      event.stopPropagation();
    }
  }

  }

答案

这可能与css规则有关。如果检查mat-form-field元素，您将看到它没有维度。也许如果你给它一些属性，如最小高度：1px，宽度：100％，位置：相对它将获得尺寸，你将能够在里面点击它，而不会被检测为外部点击。

另一答案

我使用两种方法来跟踪点击元素和其他跟踪外部点击

@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

另一答案

我有一个丑陋的解决方法，可以做的工作，

诀窍是检查，mat-focused-field元素上存在mat-focused类。

'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
          //
        });
    }
  }
}

希望它会帮助别人:)