时间戳

首页 > 解决方案 > 如何在 mat-select 中使用“overlayDir”指令？

angular - 如何在 mat-select 中使用“overlayDir”指令？

问题描述

我想根据其覆盖位置设置 mat-select-panel 的样式，因此 mat-select 提供了一个overlayDir: CdkConnectedOverlay属性。

并CdkConnectedOverlay提供财产@Output() positionChange: EventEmitter<ConnectedOverlayPositionChange>，但我似乎无法解决。

这是文档的链接：https ://material.angular.io/cdk/overlay/api#CdkConnectedOverlay

 <mat-form-field>
      <mat-label>Favorite food</mat-label>
      <mat-select disableOptionCentering panelClass="select-panel-class" overlayDir (attach)="test($event)" (backdropClick)="test($event)" (positionChange)="test($event)">
        <mat-option value="food.value1">
          value1
        </mat-option>
        <mat-option value="food.value2">
          value2
        </mat-option>
        <mat-option value="food.value3">
          value3
        </mat-option>
      </mat-select>
 </mat-form-field>

----------------ts-----------------

 test(evt){
    console.log(evt)
  }

它应该控制台记录“backdropClick”、“attach”和“positionChange”事件，但它没有显示任何内容，也没有显示任何错误。我是否正确使用它？如果没有，请说明如何使用它。

标签： angulartypescriptangular-material

解决方案

根据Angular Material 的文档，overlayDir它不是指令，而是mat-select组件内部的属性。所以你应该mat-select使用 ViewChild 装饰器获取组件，然后获取 overlayDir 属性，最后订阅backdropClick事件发射器。请参阅这个stackblitz 示例。

推荐阅读