Subject

Subject 是一種特殊類型的 Observable，它允許將值 傳播 到許多 Observable。Subjects 就像 EventEmitters。
https://rxjs-dev.firebaseapp.com/api/index/class/Subject

Subject 就像是「後給值的 Observable」

可以參考
https://ithelp.ithome.com.tw/articles/10188677

component.ts
-----
subjectValue ;

ngOnInit() {
    let subject = new Subject();
    let observer = {
        next: value => this.subjectValue = value,
    }
    subject.subscribe(observer);
    subject.next(1);
}

component.html
-----
subjectValue:{{subjectValue}}

顯示

BehaviorSubject

Subject的變體，需要初始值並在訂閱時 emits(中文：發射) 其當前值。
https://rxjs-dev.firebaseapp.com/api/index/class/BehaviorSubject

需要初始值，並 保存 變化後的值

component.ts
-----
behaviorSubjectValue = '' ;

ngOnInit() {
    let behaviorSubject = new BehaviorSubject(1);
    let observerB = {
    next: value => this.behaviorSubjectValue += String(value) + '+',
    }
    let observerC = {
    next: value => this.behaviorSubjectValue += String(value + 100),
    }
    behaviorSubject.subscribe(observerB);
    behaviorSubject.next(3);
    behaviorSubject.next(1);
    behaviorSubject.next(10);
    behaviorSubject.subscribe(observerC);
}

component.html
-----
behaviorSubjectValue:{{behaviorSubjectValue}}

顯示

concat

創建一個輸出的 Observable，它順序地從給定的Observable中發出所有值，然後繼續前進到下一個。
https://rxjs-dev.firebaseapp.com/api/index/function/concat

component.ts
-----
ngOnInit() {
    const timer1 = interval(1000).pipe(take(10));
    const timer2 = interval(2000).pipe(take(6));
    const timer3 = interval(500).pipe(take(10));
    const result = concat(timer1, timer2, timer3);
    result.subscribe(x => console.log(x));
}

console
-----
// 依照設定顯示
01234567890123450123456789

concat 用於把 observables 組合起來，它是依照順序左至右執行放到 observer

zip

組合多個Observable以創建成一個Observable，其值根據其每個輸入Observable的值按順序計算。
https://rxjs-dev.firebaseapp.com/api/index/function/zip

將 observerble 使用 zip 和 map 將陣列值組合成 物件(Object)
ts 一直有紅底線所以改寫一下，顯示結果 和 官方網站結果相同

component.ts
-----
let age$ = of<number>(27, 25, 29);
let name$ = of<string>('Foo', 'Bar', 'Beer' , '123');
let isDev$ = of<boolean>(true, true, false);

zip(age$, name$, isDev$).pipe(
    map((array) => {
        return {age:array[0],name:array[1],isDev:array[2]}
    })
)
.subscribe(x => console.log(x));

filter

過濾項目，從來源的 observable emitting 項目滿足指定的判別
https://rxjs-dev.firebaseapp.com/api/operators/filter

component.ts
-----
const clicks = fromEvent(document, 'click');
const clicksOnDivs = clicks.pipe(filter(ev => ev.target.tagName === 'BUTTON'));
clicksOnDivs.subscribe(x => console.log(x));

console
-----
(僅點擊 HTML 是 Button 的元件 才會顯示下列數據)
MouseEvent {isTrusted: true, screenX: 268, screenY: 607, clientX: 268, clientY: 505, …}

observable 每個項目經過 判別函式，僅是讓判別為 true 的值通過並 emit，並不會改變原本的值

RxJS真的相當的多，但應該就寫到這了，最後用 HttpClient 結尾