垫选择外部单击不起作用，下拉菜单关闭时

Question

我已经使用Mat选择角度组件进行下拉，当我在下拉菜单（页面主体）之外单击时，需要触发一个事件。

<mat-select #select multiple (change)="onSubmit($event)" [(ngModel)]="emp">
    <mat-option *ngFor="let value of filter.default" [value]="value">
        {{value}}
    </mat-option>
</mat-select>

这是我的ts文件

export class AnotherComponent {
  public text: String;

  @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      console.log("clicked inside");
    } else {
      console.log("clicked outside");
    }
  }

  constructor(private eRef: ElementRef) {

  }
}

它无法正常工作，请帮助

Answer 1

如果您想知道何时关闭选择面板，请使用以下openedChange事件：

<mat-select #select multiple (change)="onSubmit($event)" [(ngModel)]="emp"
    (openedChange)="openedChange($event)">
    <mat-option *ngFor="let value of filter.default" [value]="value">
        {{value}}
    </mat-option>
</mat-select>


openedChange(opened: boolean) {
    console.log(opened ? 'opened' : 'closed');
}