如何在Composable Storefront中用LaunchDialogService替换ModalRef

• 已移除API：ModalService、ModalDirective、ModalDirectiveOptions、ModalDirectiveService、ModalOptions、ModalRef
• 替代方案：使用从@spartacus/storefront导入的LaunchDialogService

原基于ModalService的实现代码 #

this.modalRef = this.modalService.openModal(CalculateModalComponent, {
  centered: true,
  size: 'lg',
  scrollable: true,
  windowClass: 'finance-calculator-modal',
  ariaLabelledBy: AccessibilityConstants.MODAL_TITLE_ID,
});
modalInstance = this.modalRef.componentInstance;
modalInstance.productCode = this.wishlistProduct.code;

迁移为LaunchDialogService的实现代码 #

// 导入所需依赖
import { LaunchDialogService } from '@spartacus/storefront';
import { ComponentRef } from '@angular/core';

// 在组件构造函数中注入LaunchDialogService
constructor(private launchDialogService: LaunchDialogService) {}

// 替换原模态框打开逻辑
const dialogRef: ComponentRef<CalculateModalComponent> = this.launchDialogService.openDialog(
  CalculateModalComponent,
  {
    centered: true,
    size: 'lg',
    scrollable: true,
    windowClass: 'finance-calculator-modal',
    ariaLabelledBy: AccessibilityConstants.MODAL_TITLE_ID,
  }
);
const modalInstance = dialogRef.instance;
modalInstance.productCode = this.wishlistProduct.code;

迁移说明 #

• LaunchDialogService.openDialog()方法返回ComponentRef对象，替代原ModalRef的功能
• 组件实例通过dialogRef.instance获取，替代原modalRef.componentInstance
• 原模态框配置参数可直接复用，格式与LaunchDialogService的配置兼容

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