如何觸發可觀察的rxjs

Question

使用rxjs v6

因此，我有多個要跟蹤/觀察的變量，當它們中的任何一個發生更改時，都會觸發一個Observable來調用API，然后再根據這些變量更新其他內容。

我以為我可以在div上觸發一個事件來迫使可觀察對象做某事，但是它並沒有基於我想要的結果返回結果

例如

var a, b, c, d // if any updates, should trigger div "update" event

let obs = fromEvent(this.$refs.updater, "update")
    .pipe(
        switchMap(i => {return this.callAnAPI()})
    )
obs.subscribe()

var update = new Event("update")
this.$refs.updater.dispatchEvent(update)

但是，在可觀察對象上沒有訂閱方法。 我試圖修改我的其他Observable之一（有效）

fromEvent(input, "keyup")
    .pipe(
        map(i => i.currentTarget.value),
        debounceTime(delay),
        distinctUntilChanged(),
        switchMap(value => 
        {
            this.page = 1
            if (ajax)
            {
                return ajax
            }   
            else
            {
                return this.axiosAjax({
                    path,
                    method,
                    data: {
                        ...data,
                        [term]: value
                    }
                })
            }    
        })
    )

Answer 1

根據您問題的標題，我推測您的自定義事件只是達到目的的一種手段。

如果是這樣，我認為實際上沒有必要。 如果希望對可觀察對象產生“外部”影響（或觸發），請使用Subject 。

例如：

 const { fromEvent, merge, of, Subject } = rxjs; const { switchMap, delay } = rxjs.operators; // fake api const fakeApi$ = of(Math.random()).pipe( delay(2000), ); // store a reference to the subject const triggerApi$ = new Subject(); // apply behavior const api$ = triggerApi$.pipe( switchMap( () => { console.log('switching to api call'); // delegate to api call return fakeApi$; } ) ); // activate (handle result) api$.subscribe((result) => { console.log('api result', result); }); // some outside triggers const fooClicks$ = fromEvent(document.getElementById('foo'), 'click'); const barClicks$ = fromEvent(document.getElementById('bar'), 'click'); const bazChanges$ = fromEvent(document.getElementById('baz'), 'change'); // combined const updates$ = merge(fooClicks$, barClicks$, bazChanges$); // activate updates$.subscribe(triggerApi$); 

 <script src="https://unpkg.com/rxjs@6.2.1/bundles/rxjs.umd.min.js"></script> <button id="foo">foo</button> <button id="bar">bar</button> <textarea id="baz"></textarea>