Question

我想根据其叠加层的位置来设置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”事件，但不显示任何内容，也不显示任何错误。我使用正确吗？如果没有，请说明如何使用。

Answer 1

根据Angular Material's documentation，overlayDir不是指令，而是mat-select组件内部的属性。因此，您应该使用ViewChild装饰器获取mat-select组件，然后获取overlayDir属性，最后订阅backdropClick事件发射器。请参阅此stackblitz example。

如何在mat-select中使用'overlayDir'指令？

1 个答案: