Блог

Мне нужно немного изменить mat-select положение выпадающего списка, в настоящее время мне нужно добавить класс в panelClass параметр для каждого mat-select экземпляра…

Есть ли какой-либо способ добавить этот класс глобально?

Я пытался использовать MAT_SELECT_CONFIG , но у него всего 2 реквизита

 export interface MatSelectConfig {
    /** Whether option centering should be disabled. */
    disableOptionCentering?: boolean;
    /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */
    typeaheadDebounceInterval?: number;
}
  

Нет способов, вот обходной путь

 import {Directive, OnInit, Inject} from '@angular/core';
import {MatSelect} from '@angular/material/select';

@Directive({
  selector: 'mat-select'
})
export class CustomSelectDirective implements OnInit {

  constructor(@Inject(MatSelect) private select: MatSelect) {
  }

  ngOnInit() {
    this.select.panelClass = 'your class';
  }
}

  

Вот демонстрация

глобально вы можете установить его с помощью:

 providers: [
    {
      provide: MAT_SELECT_CONFIG,
      useValue: { overlayPanelClass: 'customClass' }
    }
  ],
  

MAT_SELECT_CONFIG обладает таким свойством

 /** Object that can be used to configure the default options for the select module. */
export interface MatSelectConfig {
  /** Whether option centering should be disabled. */
  disableOptionCentering?: boolean;

  /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */
  typeaheadDebounceInterval?: number;

  /** Class or list of classes to be applied to the menu's overlay panel. */
  overlayPanelClass?: string | string[];
}
  

Вам нужно добавить ::ng-deep стиль для выбора в styles.scss.