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

<mat-form-field #formField>
  <!-- 表单字段内容 -->
</mat-form-field>

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  @ViewChild('formField') formField: ElementRef;
  
  // 其他组件代码
}

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  @ViewChild('formField') formField: ElementRef;
  
  // 其他组件代码
  
  @HostListener('document:click', ['$event.target'])
  onClick(targetElement: any) {
    const clickedInside = this.formField.nativeElement.contains(targetElement);
    if (!clickedInside) {
      // 在mat-form-field之外单击的操作
    }
  }
}