outlet 是 SAP Spartacus 提供 partners 一種將 custom UI 插入 Spartacus 標(biāo)準(zhǔn) DOM 的一種手段。

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

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

需求：在Spartacus product明細(xì)頁(yè)面(Product detail page, 縮寫(xiě)PDP)里增添邏輯：如果一個(gè)產(chǎn)品的庫(kù)存小于300，顯示“Limited offer”的提示信息，如下圖所示：

下面是具體實(shí)現(xiàn)方法：

新建一個(gè)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() {}}

頁(yè)面模板：

<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區(qū)域里：

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。