Spartacus v4升级至v5后Modal Service是否移除及替代方案问询

Spartacus 5.x 确实移除了原有的 ModalService，官方将模态框相关能力整合到了新的 DialogService 中，这是框架向 Angular Material 生态对齐的调整。

替代方案：使用 DialogService #

基本使用步骤 #

• 导入 DialogModule 到目标模块：

  import { DialogModule } from '@spartacus/storefront';
  
  @NgModule({
    imports: [
      // ...其他模块导入
      DialogModule
    ]
  })
  export class YourFeatureModule { }
  

• 在组件中注入 DialogService：

  import { DialogService } from '@spartacus/storefront';
  import { CustomModalComponent } from './custom-modal.component';
  
  constructor(private dialogService: DialogService) {}
  

• 调用方法打开模态框：

  openCustomModal() {
    const dialogRef = this.dialogService.open(CustomModalComponent, {
      data: { /* 传递给模态框的自定义数据 */ },
      width: '600px',
      disableClose: true // 禁止点击外部关闭模态框
    });
  
    // 监听模态框关闭事件，接收返回结果
    dialogRef.afterClosed().subscribe(returnData => {
      console.log('模态框已关闭，返回数据:', returnData);
    });
  }
  

模态框组件适配 #

原模态框组件需调整数据传递与关闭逻辑，适配新服务：

• 通过注入 MAT_DIALOG_DATA 获取传入数据：

  import { MAT_DIALOG_DATA } from '@angular/material/dialog';
  import { Inject } from '@angular/core';
  
  constructor(@Inject(MAT_DIALOG_DATA) public modalData: any) {}
  

• 通过 MatDialogRef 关闭模态框并返回结果：

  import { MatDialogRef } from '@angular/material/dialog';
  
  constructor(private dialogRef: MatDialogRef<CustomModalComponent>) {}
  
  closeModal(result?: any) {
    this.dialogRef.close(result);
  }
  

关键注意点 #

• Spartacus 5.x 的 DialogService 基于 Angular Material MatDialog 封装，可直接使用所有 Material Dialog 的配置项。
• 若之前自定义了模态框样式，需适配新的容器类名与 cxFocus 指令规则。

内容的提问来源于stack exchange，提问作者Marie Claire Michelle de la Cr