第一次触发的时候,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 就有值了:
联系客服