javascript - 如何使用 "Injection Tokens"(或其他方式)覆盖 Angular Material 默认选项

Question

The Angular Material documentation indicates可以使用“注入(inject) token ”覆盖某些默认选项:

Constants

MAT_AUTOCOMPLETE_DEFAULT_OPTIONS

Injection token to be used to override the default options for mat-autocomplete.

const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;

它看起来会公开面板高度、选项高度和其他一些内容的选项。但对于如何实现却有点模糊。我一直在引用this SO answer和 this guide我觉得我越来越接近了，但它仍然不起作用。这就是我现在所处的位置:

import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteDefaultOptions } from '@angular/material';

const appearance: MatAutocompleteDefaultOptions = {
  // here I would like to override `AUTOCOMPLETE_OPTION_HEIGHT` and `AUTOCOMPLETE_PANEL_HEIGHT`
};

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
  providers: [
    {
      provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
      useValue: appearance,
    },
  ],
export class SearchComponent { /* etc. */ } 

MatAutocompleteDefaultOptions 接口(interface)上似乎不存在 AUTOCOMPLETE_OPTION_HEIGHT 和 AUTOCOMPLETE_PANEL_HEIGHT 属性，因此这一定是不正确的。

文档指定必须使用“注入(inject) token ”，但我见过的示例和 Material 文档本身都不像 the Angular documentation on InjectionToken 。是否以某种与注入(inject) token 相关的方式将其放入 providers 数组中？很模糊。

在其Constants部分中，许多Material组件表明这种类型的行为是可以实现的，因此:

如何使用这些提供程序/注入(inject) token 来修改默认选项？

Answer 1

您可以尝试更改面板的 css 样式。看看这个https://github.com/angular/components/issues/3810用于设置面板高度。由于 MatAutocompleteDefaultOptions 只有一个属性，我认为您无法更改其他属性。

并且我看到参数声明为常量，因此您可以尝试更改 css 样式。

/** The height of each autocomplete option. */
export declare const AUTOCOMPLETE_OPTION_HEIGHT = 48;
/** The total height of the autocomplete panel. */
export declare const AUTOCOMPLETE_PANEL_HEIGHT = 256;

希望这有帮助。