第一次觸發的時候，navigation.uid 並沒有值：

下圖：navigation.service 的 getNavigationNode 方法。
![](https://img-blog.csdnimg.cn/img_convert/a717544fcd4b89e38c8871c01492c132.png)

觸發這個訂閱的入口：
![](https://img-blog.csdnimg.cn/img_convert/9a0481fd2f1d26e35af4cd1e800e46ec.png)

```html
<cx-navigation-ui async="" as="" data="http://blog.itpub.net/24475491/viewspace-2923108/"></cx-navigation-ui>

```
檢視 data$ 的資料來源。

來自 navigation service 的 `createNavigation` 方法。

![](https://img-blog.csdnimg.cn/img_convert/1c803ef99c234a8b73dd6ca704a1d8a3.png)

createNavigation 內部，會將 cmsComponentdata 和 getNavigationNode 的結果，做一個 combination.

![](https://img-blog.csdnimg.cn/img_convert/d0cef3d791dddadcb76ddcc2898616ea.png)

上圖第 23 行程式碼我們使用了 `combineLatest` 運算子。

當 Angular 應用裡存在多個長期存在的(Long-lived) observables 相互依賴以進行某些計算或執行 determination 邏輯時，推薦使用此運算子。

請注意，在每個可觀察物件至少發出一個值之前，combineLatest 不會發出初始值。 這與 withLatestFrom 的行為相同，並且可能是一個潛在的問題(gotcha)，因為既沒有輸出也沒有錯誤，此時我們的一個（或多個）內部可觀察物件可能沒有按預期執行，或者發生了訂閱延遲現象(subscription is late)。

最後，如果我們正在使用僅發出一個值的可觀察物件，或者只需要每個物件在完成前的最後一個值，則 forkJoin 可能是更好的選擇。

看個具體的例子：

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

執行結果：

![](https://img-blog.csdnimg.cn/img_convert/eb05579a4a00ab64ed2cfd0903e66e33.png)

getNavigationEntryItems 第一次總是會 undefined，這是為什麼呢？

![](https://img-blog.csdnimg.cn/img_convert/9a1db7845df5b3537815ff7a09577108.png)

從 store 裡讀取，第一次 store 肯定是空的，正常現象：
![](https://img-blog.csdnimg.cn/img_convert/0dfbbe2afab93809093538840016157c.png)

按需載入：
![](https://img-blog.csdnimg.cn/img_convert/8542e7e225698e80157ab3787af2fa48.png)

發一個 load action：
![](https://img-blog.csdnimg.cn/img_convert/470bf93a5cfe3d57a78b95162ca11122.png)

在 success 裡設定一個斷點：
![](https://img-blog.csdnimg.cn/img_convert/6db0b35531a6a22c323746ccb57fa840.png)

NavigationEntryItemEffects 負責載入：
![](https://img-blog.csdnimg.cn/img_convert/ea0ba4d1bb0763d8128175b9e8a2a6d1.png)

載入成功：
![](https://img-blog.csdnimg.cn/img_convert/b58f32d4b4635697790bb4c86cbdc6b1.png)

此時 items 就有值了：
![](https://img-blog.csdnimg.cn/img_convert/3fb7c6b3b8b6b75cdf9bbab451042edf.png)

關於 SAP 電商雲 Spartacus UI Navigation Service 執行的一些明細

相關文章