在哪里以及如何导入 MAT_LABEL_GLOBAL_OPTIONS?

k.v*_*ent 4 angular-material2 angular

按照这个带有 label 的示例表单字段,我尝试更改mat-form-field占位符的行为。共有三个选项: autoalwaysnever

该功能确实是一个很好的功能,可以根据开发人员想要实现的占位符类型来使用。

实际上,它可以在全局范围内使用,直接将其传递给@NgModule应用程序根目录:

@NgModule({
  providers: [
    {provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}}
  ]
})
Run Code Online (Sandbox Code Playgroud)

并按如下方式构建视图:

<mat-form-field [floatLabel]="never"> // never, auto or always
   <input matInput placeholder="Simple placeholder" required>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)

我的问题是我首先没有找到/知道我确切可以/应该导入的位置:MAT_LABEL_GLOBAL_OPTIONS因为它似乎不存在@angular/material,如果我检查这个GitHub-Repo,我看到它是从 导入的@angular/material/core,但它没有对我不起作用,因为我收到以下错误:

/node_modules/@angular/material/core"' has no exported member 'MAT_LABEL_GLOBAL_OPTIONS'. Did you mean 'MAT_RIPPLE_GLOBAL_OPTIONS'?

它与我使用的材料和 CLI 版本有关吗?

Angular CLI: 1.5.0
Node: 8.0.0
OS: darwin x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.0-rc.2
@angular/cli: 1.5.0
@angular/material: 5.0.0-rc.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.7
typescript: 2.4.2
webpack: 3.8.1
Run Code Online (Sandbox Code Playgroud)

Spi*_*ynn 5

在 Angular 9 中,这又发生了变化

从 Angular Material 版本 9 开始,MAT_LABEL_GLOBAL_OPTIONS 不推荐使用注入令牌。应通过MAT_FORM_FIELD_DEFAULT_OPTIONS令牌设置默认的浮动标签行为。

因此,当前的方法是添加{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } }到模块的 providers 数组中。

为此在 Angular 11 中工作

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
Run Code Online (Sandbox Code Playgroud)


Xin*_*eng 4

支持的材料的最低版本MAT_LABEL_GLOBAL_OPTIONS5.0.0-rc.3

因为它是在此文件中导出的:https://github.com/angular/material2/blob/5.0.0-rc.3/src/lib/core/label/label-options.ts,但 rc.2 不没有找到此文件 https://github.com/angular/material2/blob/5.0.0-rc.2/src/lib/core/label/label-options.ts页面。所以尝试更新到RC.3。

请参阅 5.0.0-rc.3 发行说明:https://github.com/angular/material2/releases/tag/5.0.0-rc.3

表单字段:添加对单独标签和占位符的支持 (#8223) (d6fec35), closes #6194

此功能添加新的导出常量:MAT_LABEL_GLOBAL_OPTIONS