我們可以在 `app.module.ts` 裡使用如下程式碼，獲得當前 cart id：

```typescript
export class AppModule {
  constructor(_cart: ActiveCartService){
    _cart.getActiveCartId().subscribe((data) =>
    console.log('Jerry: ', data));
    console.log(_cart);
  }
}
```

列印輸出：

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

在執行 Angular 依賴注入框架時，首先依次執行 pipe 運算子裡的 Operator 邏輯，比如 `take(1)`:

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

take 只是簡單的返回一個 function，該 function 的觸發時機？
![](https://img-blog.csdnimg.cn/img_convert/4fb15206245d75174b78319bf78d1bbb.png)

在 pipe 操作裡被呼叫：
![](https://img-blog.csdnimg.cn/img_convert/10f3411c5da8cbde76462bc0bfa70b61.png)

此時再次返回一個新的函式：
![](https://img-blog.csdnimg.cn/img_convert/0226860474e2963e8150edfbe4b2350c.png)

Observable 的 lift 操作：
![](https://img-blog.csdnimg.cn/img_convert/9b8d8e886ebbc7209b4ae6ef846d8828.png)

關於 take(1) 的使用場合：

當開發人員只對 stream 的第一個發射值感興趣時，可以使用 take。 比如我們想檢視使用者在進入頁面時首先點選了什麼，或者想訂閱 click 事件並獲取第一次點選。 另一個用例是當需要在特定時間點進行資料快照的採集，但不需要進一步排放時。 例如，使用者令牌更新流，或基於 Angular 應用程式中的流的路由保護。

如果想根據某些邏輯或另一個 observable 獲取可變數量的值，可以使用 takeUntil 或 takeWhile.

take 與 skip 相反，其中 take 將採用前 n 個發射，而 skip 將跳過前 n 個發射。

下列例子會輸出 1：

```typescript
// RxJS v6+
import { of } from 'rxjs';
import { take } from 'rxjs/operators';

//emit 1,2,3,4,5
const source = of(1, 2, 3, 4, 5);
//take the first emitted value then complete
const example = source.pipe(take(1));
//output: 1
const subscribe = example.subscribe(val => console.log(val));
```
下列程式碼會輸出整數序列 0,1,2,3,4:

```typescript
// RxJS v6+
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';

//emit value every 1s
const interval$ = interval(1000);
//take the first 5 emitted values
const example = interval$.pipe(take(5));
//output: 0,1,2,3,4
const subscribe = example.subscribe(val => console.log(val));
```

下列程式碼會將第一次點選 `div` 標籤的滑鼠座標，顯示在 HTML 頁面上：

```typescript
// RxJS v6+
import { fromEvent } from 'rxjs';
import { take, tap } from 'rxjs/operators';

const oneClickEvent = fromEvent(document, 'click').pipe(
  take(1),
  tap(v => {
    document.getElementById(
      'locationDisplay'
    ).innerHTML = `Your first click was on location ${v.screenX}:${v.screenY}`;
  })
);

const subscribe = oneClickEvent.subscribe();
```

div 元素：

```html
<div id="locationDisplay">
  Where would you click first?
</div>
```

pipe 函式里傳入的所有操作，都記錄在變數 `fns` 裡了：

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

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

最後 `activeCartId$` 存放的就是 pipe 呼叫的返回結果：

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

開始執行 `subscribe` 了：
![](https://img-blog.csdnimg.cn/img_convert/0d035a5dccdd8d0d0b185d99e48477e2.png)

還得把 `withLatestFrom`，`map` 和 `distinctUntilChanged` 都依次執行一遍：
![](https://img-blog.csdnimg.cn/img_convert/98878404dac7ec3c3c567f72b943bebc.png)

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

從除錯上下文能夠明顯看出，先執行的 filter 裡的匿名函式，再執行的 map 裡的匿名函式：

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

SAP Spartacus 開源專案裡 activeCartId$ 的實現

相關文章