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);
  }

}

界面元素如下：

<ng-container *ngIf="cart$ | async as cart">
  <ng-container *ngIf="entries$ | async as entries">
    <div *ngIf="cart.totalItems > 0" class="cart-details-wrapper">
      <cx-spinner *ngIf="!(cartLoaded$ | async)"></cx-spinner>
      <table
        class="table table-striped"
        [class.loading]="!(cartLoaded$ | async)"
      >
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Image</th>
            <th scope="col">Code</th>
            <th scope="col">Name</th>
            <th scope="col">Manufacturer</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
            <th scope="col">Total</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let entry of entries; index as i">
            <td>{{ i + 1 }}</td>
            <td>
              <a
                [routerLink]="
                  { cxRoute: 'product', params: entry.product } | cxUrl
                "
              >
                <cx-media
                  [container]="entry.product.images?.PRIMARY"
                  format="thumbnail"
                ></cx-media>
              </a>
            </td>
            <td>{{ entry.product.code }}</td>
            <td>{{ entry.product.name }}</td>
            <td>{{ entry.product.manufacturer }}</td>
            <td>{{ entry.basePrice?.formattedValue }}</td>
            <td>
              <input
                type="number"
                [value]="entry.quantity"
                (change)="onChange(entry.entryNumber, $event)"
              />
            </td>
            <td>{{ entry.totalPrice.formattedValue }}</td>
          </tr>
          <tr>
            <td colspan="7"></td>
            <td class="table-active">
              <strong>{{ cart.totalPriceWithTax.formattedValue }}</strong>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </ng-container>
</ng-container>

在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的原创文章，尽在："汪子熙":