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}}
顯示
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}}
顯示
創建一個輸出的 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
組合多個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));
過濾項目,從來源的 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,並不會改變原本的值