需求：在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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的使用 outlet 在SAP Spartacus 的页面添加自定义 HTML 元素的一个例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。