我想自定义AddedToCartDialogComponent并向该对话框窗口添加一些新元素。 我读过斯巴达克斯的文档。 我不太确定为什么它不起作用..因为我没有看到任何变化。
斯巴达克斯版本:4 这是代码:
自定义.module.ts:
@NgModule({
declarations: [
CustomSideCartComponent
],
imports: [
CommonModule,
StarRatingModule,
ConfigModule.withConfig({
cmsComponents: {
AddedToCartDialogComponent: {
component: CustomSideCartComponent, // new custom component
},
},
} as CmsConfig),
],
exports: [CustomSideCartComponent],
})
export class CustomSidecartModule { }
自定义.组件.ts:
@Component({
selector: 'app-custom-side-cart',
templateUrl: './custom-side-cart.component.html',
styleUrls: ['./custom-side-cart.component.css']
})
export class CustomSideCartComponent extends AddedToCartDialogComponent implements OnInit {
product$: Observable<Product | null> = this.currentProductService.getProduct();
constructor(
private currentProductService: CurrentProductService,
protected modalService: ModalService,
protected cartService: ActiveCartService
) {
super(modalService, cartService)
}
ngOnInit(): void {
}
}
custom.component.html:
<ng-container *ngIf="product$ | async as product">
<h1 class="new-name">{{ product.name }}</h1>
<cx-star-rating [rating]="4"></cx-star-rating>
</ng-container>
app.module.ts:
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
StoreModule.forRoot({}),
EffectsModule.forRoot([]),
SpartacusModule,
FormsModule,
ReactiveFormsModule,
CustomPdpModule,
CustomSidecartModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
没有定义 CMS
AddedToCartDialogComponent
,因此您不能以这种方式覆盖它。在 Spartacus 4 中,您必须提供您自己的 AddToCartComponent
版本,并覆盖方法 openModal
。
我必须扩展
AddedToCartDialogEventListener
并重写 -openModal
方法,如@Michal 在之前的答案中提到的。
udx-added-to-cart-dialog-event.listener.ts:
import { Injectable } from "@angular/core";
import { AddedToCartDialogEventListener } from "@spartacus/cart/base/components";
import { CartUiEventAddToCart } from "@spartacus/cart/base/root";
import { take } from "rxjs";
@Injectable({
providedIn: 'root',
})
export class UDXAddedToCartDialogEventListener extends AddedToCartDialogEventListener {
override openModal(event: CartUiEventAddToCart): void {
// Raj: Overriding behavior to use custom dialog
const addToCartData = {
productCode: event.productCode,
quantity: event.quantity,
numberOfEntriesBeforeAdd: event.numberOfEntriesBeforeAdd,
pickupStoreName: event.pickupStoreName,
};
const dialog = this.launchDialogService.openDialog(
"UDX_ADDED_TO_CART",
undefined,
undefined,
addToCartData
);
if (dialog) {
dialog.pipe(take(1)).subscribe();
}
}
}
我还扩展了
AddedToCartDialogComponent
类来进行自定义更改,并且按照模块文件中的开箱即用代码将其挂钩:
export const udxDefaultAddedToCartLayoutConfig: LayoutConfig = {
launch: {
UDX_ADDED_TO_CART: {
inlineRoot: true,
component: UDXAddedToCartDialogComponent,
dialogType: DIALOG_TYPE.DIALOG,
},
},
};
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
CartSharedModule,
RouterModule,
SpinnerModule,
PromotionsModule,
UrlModule,
IconModule,
I18nModule,
ItemCounterModule,
KeyboardFocusModule,
],
providers: [provideDefaultConfig(udxDefaultAddedToCartLayoutConfig)],
declarations: [UDXAddedToCartDialogComponent],
exports: [UDXAddedToCartDialogComponent],
})
export class UDXAddedToCartDialogModule {
constructor(_addToCartDialogEventListener: AddedToCartDialogEventListener) {
// Intentional empty constructor
}
}