在哪里以及如何导入MAT_LABEL_GLOBAL_OPTIONS？

Question

根据这个示例带标签的表单字段，我试图更改mat-form-field占位符的行为。有三个选项：auto、always和never。

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

实际上，它可以全局使用，直接传递给应用程序根目录的@NgModule：

@NgModule({
  providers: [
    {provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}}
  ]
})

并按照以下方式构建视图：

<mat-form-field [floatLabel]="never"> // never, auto or always
   <input matInput placeholder="Simple placeholder" required>
</mat-form-field>

我的问题是，我首先找不到/不知道在哪里可以/应该导入：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'?

这与我使用的 material 和 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

- k.vincent

---

你尝试过新版本的Material吗："^5.2.3"？根据我的项目，可以从Material包中导入import {MAT_LABEL_GLOBAL_OPTIONS} from "@angular/material";。 - Xin Meng

这意味着我必须升级我的@angular/material，因为你可以看到，我使用的是@angular/material: 5.0.0-rc.2。 - k.vincent

我相信版本5.2.3可以导入它。根据源代码，版本5.0.0-rc.2没有名为“label-options.ts”的文件，其中导出了MAT_LABEL_GLOBAL_OPTIONS。因此，我认为这个版本应该使用旧选项：MAT_PLACEHOLDER_GLOBAL_OPTIONS，请参见https://github.com/angular/material2/commit/26ee3e77fcd6183d0b2f5495d9a79f8d294d4037。 - Xin Meng

这个提交 https://github.com/angular/material2/commit/d6fec3573cbc854d5bf67d920c5b0f8a6eef0c86#diff-ef8c238b58a4c74aae9916a4c75635b6 - Xin Meng

升级到5.0.0-rc.3并尝试，我认为它应该可以工作。 - Xin Meng

Answer 1

在Angular 9中，这个情况已经发生了变化：

自Angular Material版本9起，注入令牌MAT_LABEL_GLOBAL_OPTIONS已被弃用。默认的浮动标签行为应通过MAT_FORM_FIELD_DEFAULT_OPTIONS令牌进行设置。

因此，当前的方法是将{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } }添加到模块的提供程序数组中。

为了使其在Angular 11中正常工作

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

- Spikolynn

Answer 2

支持MAT_LABEL_GLOBAL_OPTIONS的最低材料版本为5.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

form-field：添加对分离标签和占位符的支持（＃8223）（d6fec35），关闭＃6194

此功能添加了新的导出常量：MAT_LABEL_GLOBAL_OPTIONS。

- Xin Meng

---

现在我已经将@angular/material升级到"@angular/material": "^5.2.4"并尝试了以下代码：import { MAT_LABEL_GLOBAL_OPTIONS } from '@angular/material';但它仍然抛出相同的错误。 - k.vincent

看起来不错。似乎正常工作。我猜这是 Visual Studio Code 抛出的错误，可能错过了一些 Angular 扩展。包括编译在内，一切看起来都很好。 - k.vincent

太好了！很高兴听到这个消息。 - Xin Meng