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"><h3class="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 { }

總結

以上是生活随笔為你收集整理的SAP Spartacus 的基于outlet 的页面扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

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