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

Question

我有一个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();
    }
  }

  }

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

希望它能帮助某些人:)