Angular 5中disableOptionCentering属性的替代方案咨询

Since you can't upgrade to Angular 6+ to use the disableOptionCentering property, let's build a workaround that replicates that exact behavior in Angular 5. The core issue is Angular Material's default logic that centers the selected option in the overlay panel—we need to override that to lock the panel to the top or bottom of the select control.

Step 1: Add a Custom Panel Class #

First, assign a unique class to your mat-select to target its overlay panel:

<mat-select panelClass="fixed-position-overlay" (opened)="adjustOverlayPosition()">
  <!-- Your mat-option items here -->
</mat-select>

Step 2: Override Default Styles Globally #

Overlay panels are rendered outside your component's DOM, so you'll need to add these styles to your global styles.css or styles.scss file (component-scoped styles won't reach it):

/* Reset the default centering transform and positioning */
.fixed-position-overlay.mat-select-panel {
  transform-origin: top left !important;
  transform: translateY(0) !important;
  top: auto !important;
  bottom: auto !important;
  margin-top: 0 !important;
  position: absolute;
}

/* Disable the selected option's centering offset */
.fixed-position-overlay .mat-option.mat-selected {
  transform: none !important;
}

Step 3: Dynamically Adjust Position (Top/Bottom) #

To handle cases where the panel doesn't fit below the control (e.g., near the bottom of the screen), add a small TypeScript function to your component to toggle the panel between below and above:

import { Component, ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  @ViewChild(MatSelect) selectControl: MatSelect;

  adjustOverlayPosition(): void {
    const panelElement = this.selectControl.panel.nativeElement;
    const triggerElement = this.selectControl.trigger.nativeElement;
    
    const triggerRect = triggerElement.getBoundingClientRect();
    const panelHeight = panelElement.offsetHeight;
    const viewportBottom = window.innerHeight;

    // Calculate space available below the select
    const spaceBelow = viewportBottom - triggerRect.bottom;

    if (spaceBelow < panelHeight) {
      // Not enough space below: position panel above the select
      panelElement.style.top = `${triggerRect.top - panelHeight}px`;
    } else {
      // Enough space: position panel below the select
      panelElement.style.top = `${triggerRect.bottom}px`;
    }
  }
}

Why This Works #

• The CSS overrides break Angular Material's default centering logic, ensuring the panel doesn't shift to center the selected option.
• The adjustOverlayPosition function checks viewport space dynamically, so the panel will flip to the top when needed (just like the native Angular 6+ behavior).
• This fixes the issue where selecting a middle option caused the panel to re-center—we've completely disabled that offset.

Notes #

• Make sure the styles are added globally (not in your component's CSS) because the overlay is attached to the <body> element, not your component's DOM.
• The !important flags are necessary here to override Angular Material's inline styles that control positioning.

内容的提问来源于stack exchange，提问作者Abhishek