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

news2024/11/22 16:11:24

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

下图:navigation.service 的 getNavigationNode 方法。

触发这个订阅的入口:

<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 可能是更好的选择。

看个具体的例子:

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 就有值了:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/5120.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【HTML实战】把爱心代码放在自己的网站上是一种什么体验?

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【HTML】 最近随着电视剧《点燃我温暖你》的火热播出&#xff0c;剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈&#xf…

【毕业设计】口罩佩戴检测系统 - opencv 卷积神经网络 机器视觉 深度学习

文章目录&#x1f6a9; 0 简介&#x1f6a9;1 课题背景&#x1f6a9; 2 口罩佩戴算法实现2.1 YOLO 模型概览2.2 YOLOv32.3 YOLO 口罩佩戴检测实现2.4 实现代码2.5 检测效果&#x1f6a9; 3 口罩佩戴检测算法评价指标3.1 准确率&#xff08;Accuracy&#xff09;3.2 精确率(Prec…

Golang学习之路5-结构体/类封装等使用

文章目录前言一、结构体1.声明结构体2.匿名结构体二、类1.封装及绑定2.继承3.多态及接口4.类访问权限总结前言 go语言支持类的操作&#xff0c;但是没有class关键字&#xff0c;使用struct来模拟类、结构体。类支持封装、绑定方法、继承等 一、结构体 结构体是由零个或多个任…

【C++进阶】map和set( 万字详解)—— 上篇

&#x1f387;C学习历程&#xff1a;进阶 博客主页&#xff1a;一起去看日落吗持续分享博主的C学习历程博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a; 也许你现在做的事情&#xff0c;暂时看不到成果&#xff0c;但不要忘记&…

青少年python系列 42.面向对象-继承

青少年python系列目录_老程序员115的博客-CSDN博客 青少年python教学视频ppt源码 继承&#xff1f;继承啥&#xff1f;提起继承这两个字&#xff0c;最先能够联想到的应该就是子继父业这个成语。还记得之前在我们的课程中提及过&#xff0c;在面向对象编程时&#xff0c;是可以…

【Linux】关于进程的理解、状态、优先级和进程切换

文章目录&#x1f4dd;一、操作系统进程1.运行队列2.运行状态&#x1f4dd;二、Linux进程状态&#x1f4dd;三、两个特殊进程1.僵尸进程2.孤儿进程&#x1f4dd;四、进程优先级1.优先级概念2.查看系统进程3.PRI和NI4.top命令更改nice5.特性&#x1f4dd;五、进程切换1.并发2.进…

软件工程方法论

&#x1f430;作者简介&#xff1a;一位普通高校的在校学生&#xff0c;致力于提高自己的编程能力。 &#x1f34c;个人主页&#xff1a;比昨天强一點的博客_CSDN博客-C语言从0到精通领域博主 &#x1f34d;系列专栏&#xff1a;C语言从0到精通_比昨天强一點的博客-CSDN博客 &a…

真良心干货保姆级手把手教你Python网络编程,学不会我去你家教你

Python网络编程基本概念(计算机网络基础)IP地址与端口IP地址端口网络通信协议网络通信协议网络协议的分层TCP/UDP套接字编程socket()函数介绍UDP 编程实现UDP发送数据实现UDP先发送数据再接收数据实现UDP实现多线程聊天TFTP文件下载器基本概念下载的过程python内置模块structTC…

C/C++ Qt 标准Dialog对话框组件应用

在Qt中对话框分为两种形式&#xff0c;一种是标准对话框&#xff0c;另一种则是自定义对话框&#xff0c;在一般开发过程中标准对话框使用是最多的了&#xff0c;标准对话框一般包括 QMessageBox,QInputDialog,QFileDialog 这几种&#xff0c;这里我将总结本人在开发过程中常用…

蓝桥杯——2022年11月第十四届蓝桥杯模拟赛第一期Java

1、二进制位数 问题描述 十进制整数 2 在十进制中是 1 位数&#xff0c;在二进制中对应 10 &#xff0c;是 2 位数。 十进制整数 22 在十进制中是 2 位数&#xff0c;在二进制中对应 10110 &#xff0c;是 5 位数。 请问十进制整数 2022 在二进制中是几位数&#xff1f; 答案…

C++学习之旅 第二章 printf与cout

目录 1.printf简介 2.printf的四种用法 2.1 printf("字符串"); 2.2 printf("输出控制符",输出参数); 2.3 printf("输出控制符1 输出控制符2 ,,,,,,,, ", 输出参数1&#xff0c; 输出参数2&#xff0c;....... ); 2.4 printf("输出控制…

化妆品展示网页设计作业 静态HTML化妆品网站 DW美妆网站模板下载 大学生简单网页作品代码 个人网页制作 学生个人网页设计作业

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

C++11【智能指针详解】

智能指针&#x1f3de;️1. 为什么引入智能指针&#xff1f;&#x1f301;2. 智能指针的使用及原理&#x1f4d6;2.1 RAII思想&#x1f4d6;2.2 智能指针的原理&#x1f320;3. 常见智能指针&#x1f4d6;3.1 auto_ptr&#x1f4d6;3.2 unique_ptr&#x1f4d6;3.3 shared_ptr&…

基于深度学习的宋词生成

《自然语言处理》课程报告 摘 要 宋词是一种相对于古体诗的新体诗歌之一&#xff0c;为宋代儒客文人智慧精华&#xff0c;标志宋代文学的最高成就。宋词生成属于自然语言处理领域的文本生成模块&#xff0c;当前文本生成领域主要包括基于语言模型的自然语言生成和使用深度学习…

RK3568平台开发系列讲解(安卓适配篇)Android 源码的 device 目录

🚀返回专栏总目录 文章目录 一、device 目录简介二、Android 产品配置各种变量沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇将介绍 Android 源码的 device 目录。 一、device 目录简介 Android 源码下的 device 目录是 Android 源码中对产品的描述文件夹,各…

STM32个人笔记-CAN总线通讯

笔记来源于STM32F103VET6&#xff0c;野火指南者&#xff0c;中文参考手册&#xff0c;HAL库开发手册和b站的野火指南者视频。观看过好多次了&#xff0c;但往往理解得不够全面&#xff0c;现记下小笔记&#xff0c;用来回顾。属于个人笔记。​​​​​ 大四实习那年记忆颇深…

基于Java+Springboot+Vue+elememt宠物用品商城系统设计实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取联系&#x1f345;精彩专栏推荐订阅&#x1f447;&#x1f…

K线形态识别_空方尖兵

写在前面&#xff1a; 1. 本文中提到的“K线形态查看工具”的具体使用操作请查看该博文&#xff1b; 2. K线形体所处背景&#xff0c;诸如处在上升趋势、下降趋势、盘整等&#xff0c;背景内容在K线形态策略代码中没有体现&#xff1b; 3. 文中知识内容来自书籍《K线技术分析》…

第九章 内置模块

目录 第九章 内置模块 1.math模块 1.查看&#xff1a; 2.常用方法&#xff1a; 2.random模块 1.查看&#xff1a; ​2.例&#xff1a; 3.random(a,b) 4.random.sample(range(0,20),10) 3.os模块与os.path模块 1.作用 2.目录 3.os模块与操作系统的关系 4.路径 5.判…

自我实现tcmalloc的项目简化版本

项目介绍 该项目是基于现代多核多线程的开发环境和谷歌项目原型tcmalloc的自我实现的简化版本,相比于本身就比较优秀的malloc来说,能够略胜一筹,因为其考虑了 性能,多线程环境,锁竞争和内存碎片的问题,主要利用了池化思想来管理内存分配,对于每个线程&#xff0c;都有自己的私…