Angular12中ngx-bootstrap模态框内Material日期选择器显示异常如何解决？

核心原因说明 #

问题由三个常见错误导致：

• 输入框缺失Material必填的matInput指令，导致样式匹配异常
• Material CDK 浮层容器默认层级低于ngx-bootstrap模态框的层级，导致日期选择器被遮挡
• 层级样式写在组件内受Angular样式封装影响，未全局生效
• 未正确导入动画模块和Material相关功能模块

修复步骤 #

1. 补全模块导入 #

在你应用的根模块/当前功能模块中导入必要依赖，缺失BrowserAnimationsModule会直接导致Material组件样式和交互异常：

// app.module.ts 或对应功能模块
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule,
    // 其他原有导入
  ]
})
export class AppModule { }

2. 修正组件HTML代码 #

给输入框补全matInput指令，同时指定日期选择器的浮层附着容器为当前模态框，避免层叠上下文导致的层级异常：

<!-- 给ngx-bootstrap模态框的根容器加模板引用变量 #modalContainer -->
<div class="modal" bsModal #modalContainer>
  <!-- 其他模态框内容 -->
  <div class="form-group">
     <label for="">DOB</label>
     <input 
       matInput
       type="text" 
       class="form-control" 
       [matDatepicker]="picker"
       [matDatepickerPopupContainer]="modalContainer"
     >
     <mat-datepicker #picker></mat-datepicker>
  </div>
</div>

注：不需要额外给input加click事件触发open，matDatepicker绑定后默认点击输入框就会唤起选择器

3. 修正全局样式 #

删除你写在组件样式里的::ng-deep相关代码，把样式写在全局styles.scss文件中，避免组件样式封装的影响：

// 全局 styles.scss
@import '@angular/material/prebuilt-themes/indigo-pink.css';

// 确保Material浮层容器层级高于ngx-bootstrap模态框（ngx-bootstrap模态框默认最高层级为1055）
.cdk-overlay-container {
  z-index: 99999 !important;
}

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