Angular 15懒加载组件中Mat Datepicker选择日期后不关闭

问题描述 #

使用Angular搭配Angular Material v15开发时，遇到以下问题：

• 懒加载组件内的Mat Datepicker选择日期后，弹窗无法自动关闭；但该组件在非懒加载模块中可正常工作
• 已在共享模块和懒加载模块中导入必要的Material模块，问题仍未解决
• UI显示异常：日期选择器的切换图标样式错位、弹窗布局错乱

相关代码 #

<section  *ngIf="enableDob">
            <div id="Heading" class="margin-content input-box">
               <input class="form-control" matInput [matDatepicker]="picker" [(ngModel)]="dob" (ngModelChange)="dobCheck(oEligibility.dob)" id="dob" placeholder=" " type="text" />
               <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
               <mat-datepicker #picker></mat-datepicker>
               <label for="dob" class="form-label">date of birth</label>
            </div>
          </section>

解决方案 #

• 模块导入检查
  确保懒加载模块仅导入MatDatepickerModule、MatInputModule、MatNativeDateModule（或自定义日期适配器模块），不要在懒加载模块中重复导入BrowserAnimationsModule（根模块导入一次即可）；同时确认FormsModule（因使用了ngModel）已在懒加载模块中导入。

• 模板逻辑修复
  检查(ngModelChange)的绑定参数：当前代码传入的是oEligibility.dob，但ngModel绑定的是dob，参数不匹配可能导致逻辑异常，建议改为dobCheck(dob)；另外如果*ngIf="enableDob"频繁切换状态，可能导致日期选择器实例重建，若场景允许可改用[hidden]替代。

• 样式冲突修复
  自定义样式（如.form-control、.input-box）可能和Material默认样式冲突，建议改用Material标准的mat-form-field结构包裹组件，示例代码：

<section *ngIf="enableDob">
  <mat-form-field class="margin-content">
    <mat-label>date of birth</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="dob" (ngModelChange)="dobCheck(dob)" id="dob">
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</section>

同时排查全局/组件样式中是否有覆盖Material日期选择器的position、z-index等属性，这些可能导致弹窗交互异常。

• 日期适配器一致性
  确保懒加载模块使用的日期适配器和根模块/非懒加载组件保持一致，例如根模块用了MatNativeDateModule，懒加载模块也需要导入该模块；若使用自定义日期适配器，需确保其为全局提供。

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