iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
0

of

轉換 個別參數 成為 observable 序列
https://rxjs-dev.firebaseapp.com/api/index/function/of

component.ts
-----
export class RxjsPracticeComponent implements OnInit {
ofValue = 0;

ngOnInit() {
        of(1,2,3).subscribe(
            x => {
                this.ofValue += x;
        })
    }
}
html
-----
{{ofValue}}

顯示
https://ithelp.ithome.com.tw/upload/images/20181106/20107754pzzNFzFdXN.png

pipe

pipe<T, R>(...fns: Array<UnaryFunction<T, R>>): UnaryFunction<T, R>
https://rxjs-dev.firebaseapp.com/api/index/function/pipe

備註:UnaryFunction (中文:一元函式)

目前使用上只要是回傳值不是 Observable 幾乎都放在 pipe 內

timer

timer(5000):延遲 5 秒後,emit(中文:發射)一個 0
timer(5000,2000):延遲 5 秒後,emit 0 ,每隔 2 秒 emit 剛剛 0 的累加值

tap

從 來源的 observale 的每個 emission (中文:發射(名詞)) 執行 side effect, 但回傳的 observable 還是原先的來源
https://rxjs-dev.firebaseapp.com/api/operators/tap

component.ts
-----
tapValue = '';
tapFinalValue = '';
ngOnInit() {
    const clicks = fromEvent(document, 'click');
    const positions = clicks.pipe(
        tap(ev => {
            this.tapValue = `x:${ev['clientX']} y:${ev['clientY']}`
        }),
        map(ev => ev['clientX']),
    );
    positions.subscribe(x => this.tapFinalValue = x);
}
html
-----
tapValue:{{tapValue}}
tapFinalValue:{{tapFinalValue}}

顯示
https://ithelp.ithome.com.tw/upload/images/20181106/20107754CdzImuF9lK.png

debounceTime(中文:去除彈跳時間)

僅在經過特定時間且途中沒有其他 來源 emission (發射) ,之後才從 來源Observable 發出值
https://rxjs-dev.firebaseapp.com/api/operators/debounceTime

component.ts
-----
const clicks = fromEvent(document, 'click');
const positions = clicks.pipe(
    map(ev => ev['clientX']),
    debounceTime(5000)
);
positions.subscribe(x => this.tapFinalValue = x);

點擊滑鼠後過五秒,tapFinalValue 才會有值,若五秒內又點擊就要再等五秒才會送出值

switchMap

將每個來源值 投影到一個Observable,該 Observable 在輸出 Observable 中合併,僅從最近投影的 Observable 中發出值。
https://rxjs-dev.firebaseapp.com/api/operators/switchMap

component.ts
-----
const clicks = fromEvent(document, 'click');
const positions = clicks.pipe(
    tap(ev => {
        console.log(ev);
        this.tapValue = `x:${ev['clientX']} y:${ev['clientY']}`
    }),
    map(ev => ev['clientX']),
    switchMap((ev) => interval(1000))
);
positions.subscribe(x => this.tapFinalValue = Number(x));

點擊後,tapFinalValue 會從 0 開始累加 1 ,再次點擊 從 0 再次開始累加 1 ,原先的 clientX 已經利用 switchMap 取代掉了。

distinctUntilChanged

回傳一個Observable,它發出 來源Observable發出的所有項目,這些項目與前一項,相比是不同的。
https://rxjs-dev.firebaseapp.com/api/operators/distinctUntilChanged

component.ts
-----
ofValue = '';

of(1, 1, 1, 1, 2, 3)
.pipe(distinctUntilChanged())
.subscribe(
    x => {
        this.ofValue += x;
    },
    error => {console.log(error)}
)

ofValue 的值會是 '123',重複的值就不會再出現!


上一篇
DAY26-Angular6之RxJS初介紹
下一篇
DAY28-Angular6之RxJS-實作2
系列文
Angular初期筆記30

尚未有邦友留言

立即登入留言