Spartacus search box 里显示的产品列表数据是从哪里进行搜索的

如下图所示，selector：cx-searchbox

Component 名称：Search-box.component.ts

点击 search bar 之后：

添加 css 类：

在断点停下来的地方，查看搜索结果列表：

抛出 ProductSearch 的 action：

最后调用 ProductSearchConnector 进行搜索：

dispatch 到 adapter：

ProductList Component 里这段代码：


    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);
        }
        )
    );
  }

首先，private subscription = new Subscription(); 这行代码声明了一个新的 Subscription 对象。在 RxJS 中，Subscription 对象用于表示可观察对象（Observable）的执行，主要用于取消订阅。

接下来的代码块是 this.subscription.add()，表示将一个新的订阅添加到 subscription 对象中。被添加的订阅是 combineLatest([this.model$, this.viewMode$]) 返回的 Observable 对象的订阅。

combineLatest([this.model$, this.viewMode$]) 是 RxJS 的一个函数，用于将多个 Observable 合并成一个 Observable。当任何一个输入的 Observable 发出值，它就会发出每个输入 Observable 的最新值的数组。在这里，它合并了 this.model$ 和 this.viewMode$ 这两个 Observable 对象。

.pipe() 是用于组合多个函数的操作符，它将一个 Observable 转换为另一个 Observable。在这里，它包含了两个操作符：skip(1) 和 filter(([model, mode]) => !!model && !!mode)。

skip(1) 会忽略源 Observable 发出的前 1 个值，只对其后发出的值感兴趣。

filter(([model, mode]) => !!model && !!mode) 会过滤掉不满足条件的值。在这里，条件是 model 和 mode 两个值都存在。如果 model 或 mode 中有一个不存在（null、undefined、false、0、NaN 或空字符串），过滤器就会忽略这个值。

.subscribe((model) => { ... }) 表示对 Observable 的订阅。订阅就是 Observable 的执行，即开始接收值。在这里，当 model 和 mode 都存在时，回调函数就会被调用。

回调函数里，this.globalMessageService.add() 是调用 globalMessageService 的 add 方法，添加一个全局消息。console.log('Jerry:', model); 是输出日志，显示 model 的值。

总的来说，这段代码的主要功能是：当 this.model$ 和 this.viewMode$ 的值发生变化并且都存在时，添加一个全局消息，并在控制台打印 model 的值。

Spartacus search box 里显示的产品列表数据是从哪里进行搜索的

猜你喜欢