如何使用“注入令牌”（或其他方式）覆盖 Angular Material 默认选项答案

【问题标题】：How can I override Angular Material default options using "Injection Tokens" (or some other means)如何使用“注入令牌”（或其他方式）覆盖 Angular Material 默认选项
【发布时间】：2020-03-17 22:20:09
【问题描述】：

The Angular Material documentation indicates 可以使用“注入令牌”覆盖某些默认选项：

常量

MAT_AUTOCOMPLETE_DEFAULT_OPTIONS

要使用的注入令牌覆盖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 接口上似乎不存在属性AUTOCOMPLETE_OPTION_HEIGHT 和AUTOCOMPLETE_PANEL_HEIGHT，所以这一定是错误的。

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

在他们的 Constants 部分中，许多 Material 组件表明这种行为是可以实现的，因此：

如何使用这些 Providers / Injection Tokens 来修改默认选项？

【问题讨论】：

标签： javascript angular dependency-injection angular-material

【解决方案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;

希望这会有所帮助。

【讨论】：