SAP Spartacus 的基于outlet 的页面扩展

outlet 是 SAP Spartacus 提供 partners 一种将 custom UI 插入 Spartacus 标准 DOM 的一种手段。

outlets get added for each slot when page templates, slots or components are dynamically rendered.

outlet的label和被包裹的element name属性一致。

需求：在Spartacus product明细页面(Product detail page, 缩写PDP)里增添逻辑：如果一个产品的库存小于300，显示“Limited offer”的提示信息，如下图所示：

下面是具体实现方法：

新建一个Outlet Component：

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() {

  }

}

页面模板：

<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>

<ng-template cxOutletRef="PDP.PRICE" cxOutletPos="before">
  <h3
    class="text-danger"
    *ngIf="(currentProduct$ | async)?.stock.stockLevel < 300"
  >
    Limited offer!
  </h3>
</ng-template>

在NgModule里，将outlet Component加入到exports区域里：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OutletsComponent } from './outlets.component';
import { OutletRefModule, ProductListModule } from '@spartacus/storefront';



@NgModule({
  declarations: [OutletsComponent],
  imports: [
    CommonModule,
    OutletRefModule,
    ProductListModule
  ],
  exports: [OutletsComponent]
})
export class OutletsModule { }