如何在独立组件中重写OverlayContainer提供者？

独立组件不依赖NgModule，模块级的依赖配置不会自动生效，你可以通过以下两种方式实现自定义覆盖容器的替换：

1. 全局生效（所有独立组件共用） #

在bootstrapApplication的配置中添加providers，写法和NgModule中一致：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { OverlayContainer } from '@angular/cdk/overlay';
import { CustomOverlayContainer } from './custom-overlay-container';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: OverlayContainer, useClass: CustomOverlayContainer }
  ]
});

2. 仅单个独立组件生效 #

直接在目标独立组件的@Component装饰器里声明providers：

import { Component } from '@angular/core';
import { OverlayContainer } from '@angular/cdk/overlay';
import { CustomOverlayContainer } from '../custom-overlay-container';

@Component({
  selector: 'app-standalone-demo',
  templateUrl: './standalone-demo.component.html',
  standalone: true,
  providers: [
    { provide: OverlayContainer, useClass: CustomOverlayContainer }
  ]
})
export class StandaloneDemoComponent { }

关键说明 #

独立组件拥有自己的依赖注入上下文，NgModule中配置的providers不会渗透到这个上下文里。必须在组件自身的providers数组，或者应用全局的bootstrap配置中声明自定义容器的提供规则，Angular的DI系统才能在组件初始化时找到并使用你的CustomOverlayContainer。

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