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 来修改默认选项?
最佳答案
您可以尝试更改面板的 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;
希望这有帮助。
关于javascript - 如何使用 "Injection Tokens"(或其他方式)覆盖 Angular Material 默认选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58984157/