如何在Angular中导入并配置MAT_LABEL_GLOBAL_OPTIONS？

刚好我之前折腾过Angular Material里mat-form-field占位符的显示行为，这就给你详细拆解下实现方法，不管是单个字段单独设置还是全局统一配置都能搞定：

mat-form-field的占位符浮动行为支持三种选项，对应不同的场景：

• auto：默认行为，当字段获得焦点或者有值时，占位符会浮动到字段上方；无值且失焦时，占位符回到输入框内
• always：不管字段有没有值、是否聚焦，占位符始终保持在字段上方的浮动状态
• never：占位符永远不会浮动，一直显示在输入框内（即使字段有值也会被覆盖，这个要谨慎使用）

如果只需要给某个特定的mat-form-field设置占位符行为，直接在组件模板里用floatLabel属性指定即可，示例代码如下：

<!-- 始终浮动占位符 -->
<mat-form-field floatLabel="always">
  <mat-label>用户名</mat-label>
  <input matInput placeholder="请输入用户名">
</mat-form-field>

<!-- 从不浮动占位符 -->
<mat-form-field floatLabel="never">
  <mat-label>密码</mat-label>
  <input matInput type="password" placeholder="请输入密码">
</mat-form-field>

<!-- 使用默认的auto行为 -->
<mat-form-field floatLabel="auto">
  <mat-label>邮箱</mat-label>
  <input matInput placeholder="请输入邮箱">
</mat-form-field>

要是想让整个项目里的mat-form-field都统一使用同一种占位符行为，直接在根模块的@NgModule里配置全局提供者就行，比如设置全局默认始终浮动：

import { NgModule } from '@angular/core';
import { MAT_LABEL_GLOBAL_OPTIONS } from '@angular/material/form-field';

@NgModule({
  declarations: [
    // 你的组件声明
  ],
  imports: [
    // 导入Angular Material相关模块
  ],
  providers: [
    {
      provide: MAT_LABEL_GLOBAL_OPTIONS,
      useValue: { float: 'always' } // 这里可以替换成auto/never
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

配置完之后，所有没单独设置floatLabel的mat-form-field都会自动继承这个全局行为，非常省心。

这里给你写个简单的组件模板示例，展示三种配置的实际效果：

<div class="form-container">
  <h3>不同占位符行为示例</h3>
  
  <mat-form-field floatLabel="always" appearance="fill">
    <mat-label>始终浮动</mat-label>
    <input matInput placeholder="测试输入">
  </mat-form-field>

  <mat-form-field floatLabel="auto" appearance="fill">
    <mat-label>默认自动</mat-label>
    <input matInput placeholder="测试输入">
  </mat-form-field>

  <mat-form-field floatLabel="never" appearance="fill">
    <mat-label>从不浮动</mat-label>
    <input matInput placeholder="测试输入">
  </mat-form-field>
</div>

内容的提问来源于stack exchange，提问作者k.vincent