只有 tap
import {
Component, OnDestroy, OnInit } from '@angular/core';
import {
GlobalMessageService,
GlobalMessageType,
ProductSearchPage,
} from '@spartacus/core';
import {
BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
import {
filter, skip, take, tap } from 'rxjs/operators';
import {
PageLayoutService } from '../../../../cms-structure/page/index';
import {
ViewConfig } from '../../../../shared/config/view-config';
import {
ViewModes } from '../product-view/product-view.component';
import {
ProductListComponentService } from './product-list-component.service';
@Component({
selector: 'cx-product-list',
templateUrl: './product-list.component.html',
})
export class ProductListComponent implements OnInit, OnDestroy {
private subscription = new Subscription();
isInfiniteScroll: boolean | undefined;
model$: Observable<ProductSearchPage> =
this.productListComponentService.model$.pipe(
tap(
(searchResultsPage: ProductSearchPage): ProductSearchPage => {
console.log('Jerry tap: ', searchResultsPage);
return searchResultsPage;
}
)
);
viewMode$ = new BehaviorSubject<ViewModes>(ViewModes.Grid);
ViewModes = ViewModes;
constructor(
private pageLayoutService: PageLayoutService,
private productListComponentService: ProductListComponentService,
private globalMessageService: GlobalMessageService,
public scrollConfig: ViewConfig,
) {
}
ngOnInit(): void {
this.isInfiniteScroll = this.scrollConfig.view?.infiniteScroll?.active;
this.subscription.add(
this.pageLayoutService.templateName$
.pipe(take(1))
.subscribe((template) => {
this.viewMode$.next(
template === 'ProductGridPageTemplate'
? ViewModes.Grid
: ViewModes.List
);
})
);
this.subscription.add(
combineLatest([this.model$, this.viewMode$])
.pipe(
skip(1),
filter(([model, mode]) => !!model && !!mode)
)
.subscribe((model) =>{
this.globalMessageService.add(
{
key: 'sorting.pageViewUpdated' },
GlobalMessageType.MSG_TYPE_ASSISTIVE,
500
);
console.log('Jerry:', model);
}
)
);
}
sortList(sortCode: string): void {
this.productListComponentService.sort(sortCode);
}
setViewMode(mode: ViewModes): void {
this.viewMode$.next(mode);
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
带了 RoutingService 的代码
import {
Component, OnDestroy, OnInit } from '@angular/core';
import {
GlobalMessageService,
GlobalMessageType,
ProductSearchPage,
RoutingService,
} from '@spartacus/core';
import {
BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';
import {
filter, skip, take, tap } from 'rxjs/operators';
import {
PageLayoutService } from '../../../../cms-structure/page/index';
import {
ViewConfig } from '../../../../shared/config/view-config';
import {
ViewModes } from '../product-view/product-view.component';
import {
ProductListComponentService } from './product-list-component.service';
@Component({
selector: 'cx-product-list',
templateUrl: './product-list.component.html',
})
export class ProductListComponent implements OnInit, OnDestroy {
private subscription = new Subscription();
isInfiniteScroll: boolean | undefined;
model$: Observable<ProductSearchPage> =
this.productListComponentService.model$.pipe(
tap(
(searchResultsPage: ProductSearchPage): ProductSearchPage => {
if(!searchResultsPage.freeTextSearch || searchResultsPage. freeTextSearch === ""){
return searchResultsPage;
}
console.log('Jerry data:', searchResultsPage);
if( searchResultsPage?.products && searchResultsPage?.products?.length === 1){
console.log('Jerry only one product found: ', searchResultsPage);
this.routingService.go({
cxRoute: 'product',
params: searchResultsPage.products[0]
});
}
return searchResultsPage;
}
)
);
viewMode$ = new BehaviorSubject<ViewModes>(ViewModes.Grid);
ViewModes = ViewModes;
constructor(
private pageLayoutService: PageLayoutService,
private productListComponentService: ProductListComponentService,
private globalMessageService: GlobalMessageService,
public scrollConfig: ViewConfig,
private routingService: RoutingService
) {
}
ngOnInit(): void {
this.isInfiniteScroll = this.scrollConfig.view?.infiniteScroll?.active;
this.subscription.add(
this.pageLayoutService.templateName$
.pipe(take(1))
.subscribe((template) => {
this.viewMode$.next(
template === 'ProductGridPageTemplate'
? ViewModes.Grid
: ViewModes.List
);
})
);
this.subscription.add(
combineLatest([this.model$, this.viewMode$])
.pipe(
skip(1),
filter(([model, mode]) => !!model && !!mode)
)
.subscribe((model) =>{
this.globalMessageService.add(
{
key: 'sorting.pageViewUpdated' },
GlobalMessageType.MSG_TYPE_ASSISTIVE,
500
);
console.log('Jerry:', model);
}
)
);
}
sortList(sortCode: string): void {
this.productListComponentService.sort(sortCode);
}
setViewMode(mode: ViewModes): void {
this.viewMode$.next(mode);
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}