Angular 17独立模式下如何全局配置MAT_FORM_FIELD_DEFAULT_OPTIONS

一、配置MAT_FORM_FIELD_DEFAULT_OPTIONS #

在独立模式下无需依赖NgModule，直接在bootstrapApplication函数的providers数组中配置即可，这是独立应用的标准全局配置方式：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }
  ]
});

二、通用全局提供者令牌的配置方法 #

所有类似的全局配置令牌（包括Material其他组件的全局配置、Angular内置的全局提供者），在独立模式下都遵循统一逻辑：

• 应用级全局配置：将提供者配置放在bootstrapApplication的providers数组中，对整个应用生效
• 组件级局部全局配置：如果只想让配置对某个独立组件及其子组件生效，直接在组件的@Component装饰器的providers数组中添加

举个例子，给某个独立组件单独设置表单字段外观：

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

@Component({
  selector: 'app-custom-form',
  templateUrl: './custom-form.component.html',
  standalone: true,
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } }
  ]
})
export class CustomFormComponent {}

本质上，这种配置和NgModule里的providers逻辑完全一致，只是把配置载体从NgModule换成了bootstrapApplication或独立组件的providers数组，依赖注入的作用域规则也保持不变。

内容的提问来源于stack exchange，提问作者Richard77