使用 outlet 在SAP Spartacus 的页面添加自定义 HTML 元素的一个例子

需求：在SAP Spartacus的home page如下区域，显示硬编码的Hot sale标题：

创建一个新的Component，其中hotProduct$的值填充成硬编码的id为816780的产品：

import { Component, OnInit } from '@angular/core';
import { Product, ProductService } from '@spartacus/core';
import { CurrentProductService } from '@spartacus/storefront';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-outlets',
  templateUrl: './outlets.component.html',
})
export class OutletsComponent implements OnInit {

  hotProduct$: Observable<Product> = this.productService.get('816780');
  currentProduct$: Observable<Product> = this.currentProductService.getProduct();

  constructor(private productService: ProductService, private currentProductService: CurrentProductService) { }

  ngOnInit() {

  }

}

将hotProduct$的内容填充到标准的Spartacus Product list控件里，选择器为cx-product-list-item:

<ng-template cxOutletRef="Section1" cxOutletPos="before">
  <h1>Hot sale</h1>
  <cx-product-list-item
    *ngIf="hotProduct$ | async as product"
    [product]="product"
  ></cx-product-list-item>
</ng-template>

这个product list控件的外观如下图所示：

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