shipping address維護頁面的id：/checkout/shipping-address:

后臺cms的請求：

layout實現：

<ng-container *ngIf="cards$ | async as cards"><h3 class="cx-checkout-title d-none d-lg-block d-xl-block">{{ 'checkoutAddress.shippingAddress' | cxTranslate }}</h3><ng-container *ngIf="!forceLoader && !(isLoading$ | async); else loading"><ng-container*ngIf="isAccountPayment || (cards?.length && !addressFormOpened);else newAddressForm"><p class="cx-checkout-text">{{ 'checkoutAddress.selectYourShippingAddress' | cxTranslate }}</p><div class="cx-checkout-btns row" *ngIf="!isAccountPayment"><div class="col-sm-12 col-md-12 col-lg-6"><buttonclass="btn btn-block btn-action"(click)="showNewAddressForm()">{{ 'checkoutAddress.addNewAddress' | cxTranslate }}</button></div></div><div class="cx-checkout-body row"><divclass="cx-shipping-address-card col-md-12 col-lg-6"*ngFor="let card of cards; let i = index"><divclass="cx-shipping-address-card-inner"(click)="selectAddress(card.address)"><cx-card[border]="true"[fitToContainer]="true"[content]="card.card"(sendCard)="selectAddress(card.address)"></cx-card></div></div></div><div class="cx-checkout-btns row"><div class="col-md-12 col-lg-6"><button class="cx-btn btn btn-block btn-action" (click)="back()">{{ backBtnText | cxTranslate }}</button></div><div class="col-md-12 col-lg-6"><buttonclass="cx-btn btn btn-block btn-primary"[disabled]="!selectedAddress?.id"(click)="next()">{{ 'common.continue' | cxTranslate }}</button></div></div></ng-container><ng-template #newAddressForm><cx-address-form*ngIf="cards.length; else initialAddressForm"[showTitleCode]="true"(backToAddress)="hideNewAddressForm(false)"(submitAddress)="addAddress($event)"></cx-address-form><ng-template #initialAddressForm><cx-address-form[showTitleCode]="true"[setAsDefaultField]="!isGuestCheckout"[addressData]="selectedAddress"cancelBtnLabel="{{ backBtnText | cxTranslate }}"(backToAddress)="hideNewAddressForm(true)"(submitAddress)="addAddress($event)"></cx-address-form></ng-template></ng-template></ng-container><ng-template #loading><div class="cx-spinner"><cx-spinner></cx-spinner></div></ng-template> </ng-container>

這個ng-container里的else loading中的loading是一個template的id：

這個cx-spinner是一個reuse的轉盤動畫控件：

顯示的時候，UI被鎖住，continue按鈕不可見。

Next按鈕的實現：在next函數里

要獲取更多Jerry的原創(chuàng)文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的SAP Spartacus checkout Shipping address的页面实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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