SAP Spartacus的Component映射

Spartacus默认的购物车界面：

https://github.com/SAP/spartacus-bootcamp/blob/master/sparta0/src/app/components/cart.component.ts

新建一个CartComponent，对Spartacus标准的CartDetailsComponent进行扩展：

import { Component } from '@angular/core';
import { CartDetailsComponent } from '@spartacus/storefront';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.scss']
})
export class CartComponent extends CartDetailsComponent {

  onChange(entryNumber, event) {
    this.activeCartService.updateEntry(entryNumber, event.target.value);
  }

}

界面元素如下：

  
    

      
      

        

          

            
#
            
Image
            
Code
            
Name
            
Manufacturer
            
Price
            
Quantity
            
Total
          
        
        

          

            
{{ i + 1 }}
            

              
                
              
            
            
{{ entry.product.code }}
            
{{ entry.product.name }}
            
{{ entry.product.manufacturer }}
            
{{ entry.basePrice?.formattedValue }}
            

              
            
            
{{ entry.totalPrice.formattedValue }}
          
          

            

            

              {{ cart.totalPriceWithTax.formattedValue }}
            
          
        
      
    
  

在NgModule里，使用ConfigModule将CartComponent对应的Angular Component替换成我们自定义的CartComponent：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CartComponent } from './cart.component';
import { ConfigModule, CmsConfig, UrlModule, FeaturesConfigModule, I18nModule } from '@spartacus/core';
import { CartSharedModule, CartCouponModule, PromotionsModule, MediaModule, SpinnerModule } from '@spartacus/storefront';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';



@NgModule({
  declarations: [CartComponent],
  imports: [

    CartSharedModule,
    CommonModule,
    CartCouponModule,
    RouterModule,
    MediaModule,
    UrlModule,
    PromotionsModule,
    FeaturesConfigModule,
    I18nModule,
    FormsModule,
    SpinnerModule,

    ConfigModule.withConfig({
      cmsComponents: {
        CartComponent: {
          component: CartComponent,
        },
      }
    } as CmsConfig)
  ],
  entryComponents: [CartComponent]
})
export class ComponentsModule { }

运行时效果：

更多Jerry的原创文章，尽在："汪子熙":