Angular 4 OverlayContainer重复问题：Material Dialog为何不复用已有容器？

我之前也碰到过一模一样的问题，核心原因就是md2组件和Angular Material各自创建了OverlayContainer实例，导致浮层容器不共享，进而引发z-index堆叠异常。要解决这个问题，关键是在根注入器层面提供唯一的OverlayContainer单例，让所有需要浮层的组件都复用它，具体步骤如下：

1. 在根模块中导入并提供OverlayContainer #

首先找到你的根模块（一般是AppModule），从Angular CDK中导入OverlayContainer，然后在模块的providers数组中声明它，确保整个应用共享同一个实例：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { OverlayContainer } from '@angular/cdk/overlay'; // 导入OverlayContainer

import { AppComponent } from './app.component';
// 导入你的其他模块和组件

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // 其他导入的模块，比如Md2Module、MatDialogModule等
  ],
  providers: [
    OverlayContainer, // 在这里提供单例
    // 你的其他服务
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 移除md2模块中重复的OverlayContainer提供 #

有些md2组件的模块可能会自己提供OverlayContainer，这会导致多实例问题。你需要检查md2相关的模块（比如Md2SelectModule、Md2DatepickerModule等）的配置，如果它们的providers数组里包含OverlayContainer，要把这行移除，让它们使用根模块提供的单例。

3. 验证结果 #

启动应用后，依次打开md2的浮层组件（比如md2-select）和Angular Material Dialog，然后在浏览器开发者工具中查看<body>标签下的元素，你会发现只会有一个<div class="cdk-overlay-container"></div>容器，所有浮层都会挂载到这个容器下，z-index的堆叠顺序也会恢复正常。

你看到的注释里提到的"provided in the root component"，其实指的是在根注入器（也就是根模块的providers）中提供，这样整个应用的所有组件、服务都会共享这个实例，从根源上避免多个容器被创建。

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