iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0
Modern Web

Angular初期筆記系列 第 26

DAY26-Angular6之RxJS初介紹

對RxJS的想法

RxJS基本是「有流程處理資料的方法集合」,從包裝到加工最後輸出,對於 Angular 來說是必備的(像 HttpClient 也會用到),原先規劃是要先講 HttpClient ,但是寫到一半覺得不先說 RxJS 之後再補又會重複,所以提早先寫RxJS

先備知識

重要的五點

  • Observable (中文:可觀察的)
  • Observer (中文:觀察者)
  • Subscribe (中文:訂閱(動詞)
  • Subscription(中文:訂閱(名詞))
  • complete 和 unsubscribe 的不同

Observable (中文:可觀察的)

在任何時間呈現一組值,這是 RxJS 的大部分使用的基本區塊
https://rxjs-dev.firebaseapp.com/api/index/class/Observable

基本上它就很像是陣列和物件,是儲存 值 的集合

Observer (中文:觀察者)

接收到 值 執行什麼內容,其中會有三個動作:next,error,complete

Observer

js
-----
var observer = {
    next: function(value) {
        console.log(value);
    },
    error: function(error) {
        console.log(error)
    },
    complete: function() {
        console.log('complete')
    }
}

https://ithelp.ithome.com.tw/articles/10187005

沒有 Observer 寫法
備註:假如你有寫 Observer 把 subscribe 內的東西換成 你的 Observer 就可以了。
https://rxjs-dev.firebaseapp.com/api/index/class/Observable#subscribe-

component.ts
-----
Observable.subscribe(
    x => { this.clickValue = `x: ${x['clientX']} y: ${x['clientY']} ` },
    error => { console.log(error) },
    () => { this.clickValue = `時間到` }
);

Subscribe (中文:訂閱(動詞)

屬於 Observable 的方法
表示啟動 Observable 開始執行 observer

Subscription(中文:訂閱(名詞))

當 observable 被訂閱,就是 Subscription
通常可以寫一個變數去接方便去執行其他方法
Subscription 擁有可以 complete() 和 unsubscribe() 的方法

component.ts
-----
this.allSubscribtion = this.clicksObservale
.subscribe(
    x => { this.clickValue = `x: ${x['clientX']} y: ${x['clientY']} ` },
    error => { console.log(error) },
    () => { this.clickValue = `時間到` }
);

allSubscribtion,就是 Subscription

complete 和 unsubscribe 的不同

實作一個五秒內可以點擊給予座標的實例

component.ts
-----
import { Component, OnInit } from '@angular/core';
import { interval, fromEvent } from 'rxjs';
import { take, takeUntil, takeLast } from "rxjs/operators";

@Component({
    selector: 'app-rxjs-practice',
    templateUrl: './rxjs-practice.component.html',
    styleUrls: ['./rxjs-practice.component.css']
})

export class RxjsPracticeComponent implements OnInit {
    clickValue;
    allSubscribtion;
    clicksObservale = fromEvent(document.body, 'click')

    constructor() { }

    ngOnInit() {
    const walkTimer = interval(1000);
    const takefive = walkTimer.pipe(take(6), takeLast(1));

    this.allSubscribtion = this.clicksObservale
    .pipe(takeUntil(takefive))
    .subscribe(
        x => { this.clickValue = `x: ${x['clientX']} y: ${x['clientY']} ` },
        error => { console.log(error) },
        () => { this.clickValue = `時間到` }
        );
    }

    toFinish() {
        this.allSubscribtion.complete();
    }

    toUnSubscribe() {
        this.allSubscribtion.unsubscribe();
    }
}
component.html
-----
<div class="container">
    <h4>座標位置:{{clickValue}}</h4>

    <button type="button" class="btn btn-outline-primary" (click)="toFinish()">直接完成</button>

    <button type="button" class="btn btn-outline-primary" (click)="toUnSubscribe()">直接取消訂閱</button>
</div>

顯示
點擊任一位置,會顯示座標
https://ithelp.ithome.com.tw/upload/images/20181105/2010775426Y8pVrvv8.png

在五秒內 點選 直接完成,再點擊其他位置也不會動作
https://ithelp.ithome.com.tw/upload/images/20181105/20107754cihZf3BEZS.png

在五秒內 點選 直接取消訂閱,再點擊其他位置也不會動作,座標值 會停在 取消訂閱前的 值
https://ithelp.ithome.com.tw/upload/images/20181105/20107754GHQG2F86VR.png


上一篇
DAY25-Angular6之Array 彙整表
下一篇
DAY27-Angular6之RxJS-實作1
系列文
Angular初期筆記30

尚未有邦友留言

立即登入留言