Angular 如何在用户单击“垫表单”字段时关闭“垫选择”

我在angular项目中使用mat select作为下拉式语言选择器

我希望当我单击mat form字段（在带有红色椭圆形的图像中显示）时，mat select会关闭，但它不会关闭

请注意，我研究了mat select，发现它有一个名为

close

的方法

关闭覆盖面板并聚焦主体图元

我想如果我可以在面板打开并且用户单击面板时调用此方法，我的问题就会得到解决。我只是不知道如何使用这个方法，在文档中找不到任何东西

这是我的

html

：

<mat-form-field class="locale-selector">
        <mat-select
          disableOptionCentering
          [value]="currentLocaleModel.locale"
          panelClass="locale-selector-panel"
          (valueChange)="handleLocaleChange($event)"
        >
          <mat-option
            *ngFor="let item of availableLocales"
            [value]="item.locale"
          >
            {{ item.caption }}
          </mat-option>
       </mat-select>
</mat-form-field>

{{item.caption}

您需要使用ViewChild才能在ts代码中使用它

角度上的解释：

有人在垫子上使用它：

---

默认情况下，单击面板外的任何位置时，MatSelectPanel都应关闭。不需要使用任何其他功能。 你可以在这张照片上看到这一点

另外，为了更好地理解您的问题，请对您的问题进行简要介绍。

您可以使用哈希标记（#）并直接在html中使用元素

<mat-form-field click="mySelect.close()" class="locale-selector">
        <mat-select #mySelect
          disableOptionCentering
          [value]="currentLocaleModel.locale"
          panelClass="locale-selector-panel"
          (valueChange)="handleLocaleChange($event)"
        >
          <mat-option
            *ngFor="let item of availableLocales"
            [value]="item.locale"
          >
            {{ item.caption }}
          </mat-option>
       </mat-select>
</mat-form-field>

{{item.caption}