對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>

顯示
點擊任一位置，會顯示座標

在五秒內 點選 直接完成，再點擊其他位置也不會動作

在五秒內 點選 直接取消訂閱，再點擊其他位置也不會動作，座標值 會停在 取消訂閱前的 值