前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细

关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细

作者头像
Jerry Wang
发布2022-11-18 14:24:02
4470
发布2022-11-18 14:24:02
举报

第一次触发的时候,navigation.uid 并没有值:

下图:navigation.service 的 getNavigationNode 方法。

触发这个订阅的入口:

代码语言:javascript
复制
<cx-navigation-ui
  *ngIf="data$ | async as data"
  [node]="node$ | async"
  [ngClass]="data.styleClass"
  [wrapAfter]="data.wrapAfter"
  [resetMenuOnClose]="data.resetMenuOnClose"
></cx-navigation-ui>

查看 data$ 的数据源。

来自 navigation service 的 createNavigation 方法。

createNavigation 内部,会将 cmsComponentdata 和 getNavigationNode 的结果,做一个 combination.

上图第 23 行代码我们使用了 combineLatest 操作符。

当 Angular 应用里存在多个长期存在的(Long-lived) observables 相互依赖以进行某些计算或执行 determination 逻辑时,推荐使用此运算符。

请注意,在每个可观察对象至少发出一个值之前,combineLatest 不会发出初始值。 这与 withLatestFrom 的行为相同,并且可能是一个潜在的问题(gotcha),因为既没有输出也没有错误,此时我们的一个(或多个)内部可观察对象可能没有按预期运行,或者发生了订阅延迟现象(subscription is late)。

最后,如果我们正在使用仅发出一个值的可观察对象,或者只需要每个对象在完成前的最后一个值,则 forkJoin 可能是更好的选择。

看个具体的例子:

代码语言:javascript
复制
import { timer, combineLatest } from 'rxjs';

// timerOne emits first value at 1s, then once every 4s
const timerOne$ = timer(1000, 4000);
// timerTwo emits first value at 2s, then once every 4s
const timerTwo$ = timer(2000, 4000);
// timerThree emits first value at 3s, then once every 4s
const timerThree$ = timer(3000, 4000);

// when one timer emits, emit the latest values from each timer as an array
combineLatest(timerOne$, timerTwo$, timerThree$).subscribe(
  ([timerValOne, timerValTwo, timerValThree]) => {
    /*
      Example:
    timerThree first tick: 'Timer One Latest: 0, Timer Two Latest: 0, Timer Three Latest: 0
    timerOne second tick: 'Timer One Latest: 1, Timer Two Latest: 0, Timer Three Latest: 0
    timerTwo second tick: 'Timer One Latest: 1, Timer Two Latest: 1, Timer Three Latest: 0
  */
    console.log(
      `Timer One Latest: ${timerValOne},
     Timer Two Latest: ${timerValTwo},
     Timer Three Latest: ${timerValThree}`
    );
  }
);

执行结果:

getNavigationEntryItems 第一次总是会 undefined,这是为什么呢?

从 store 里读取,第一次 store 肯定是空的,正常现象:

按需加载:

发一个 load action:

在 success 里设置一个断点:

NavigationEntryItemEffects 负责加载:

加载成功:

此时 items 就有值了:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-11-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档