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

举报
Jerry Wang 发表于 2023/07/09 09:53:03 2023/07/09
【摘要】 如下图所示,selector:cx-searchboxComponent 名称:Search-box.component.ts点击 search bar 之后:添加 css 类:在断点停下来的地方,查看搜索结果列表:抛出 ProductSearch 的 action:最后调用 ProductSearchConnector 进行搜索:dispatch 到 adapter:ProductList...

如下图所示,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) 会过滤掉不满足条件的值。在这里,条件是 modelmode 两个值都存在。如果 modelmode 中有一个不存在(nullundefinedfalse0NaN 或空字符串),过滤器就会忽略这个值。

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

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

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。