如何僅獲取Angular 6 rxjs中的最后一個可觀察到的輸出

Question

我有一個來自不同組件的可觀察的form.valueChanges。

我需要第一個輸出將工具欄標題設置為可見window.dispatchEvent(new CustomEvent('showHeader', { detail: true }))之后，我需要等待用戶輸入status 。

這是我的挑戰：當status === true我只想要最后一個可觀察到的輸出（因為它包含所有表單更改）。 此處顯示的代碼有效，但每個可觀察的輸出保存一次。

我花了數小時來瀏覽rxjs文檔以及對SO的回答都無濟於事。 我試圖切換到Subject，但這顯然不是走的路，還有其他幾次嘗試，現在我很確定（！） publishReplay是解決方案，但我無法使其正常工作。

import { debounceTime, publishRelay } from 'rxjs/operators';
import { Directive, Output, Input, EventEmitter, OnInit } from '@angular/core';

import { SaveService } from './save.service';

@Directive({
    selector: '[save]'
})
export class SaveDirective implements OnInit {

    @Input() public save: any;
    @Output() public appSubmit: EventEmitter<any> = new EventEmitter<any>();
    @Input() public debounce = 500;

    constructor(private saveService: SaveService) { }

    ngOnInit() {
        this.save.form.valueChanges
            .pipe(debounceTime(this.debounce))
            // .publishReplay(1).refCount()
            .subscribe((data: any) => {
            if (this.save.valid && !this.save.pristine) {
                window.dispatchEvent(new CustomEvent('showHeader', { detail: true }));

                this.saveService.currentStatus$.subscribe((status: boolean) => {
                    if (status) {
                        this.appSubmit.emit({ data });
                        this.saveService.changeStatus(false);
                        window.dispatchEvent(new CustomEvent('showHeader', { detail: false }));
                    }
                })
            }
        });
    }
}

Answer 1

     ngOnInit() {
            this.save.form.valueChanges
                .pipe(
debounceTime(this.debounce),
tap((value)=> {
if(!this.status) never();
 else of(value);

}),
mergeMap((value)=>{
return this.saveService.currentStatuss;
})                   

).subscribe(data=> {
this.appSubmit.emit({ data });
                            this.saveService.changeStatus(false);
                            window.dispatchEvent(new CustomEvent('showHeader', { detail: false }));

})

您可以檢查管道是否要繼續進行。 希望這會有所幫助。 幫助https://blog.strongbrew.io/rxjs-patterns-conditionally-executing-work/

Answer 2

仍然缺少一些細節，但這可以完成工作

import { debounceTime, map, switchMap } from 'rxjs/operators';
import { Directive, Output, Input, EventEmitter, OnInit } from '@angular/core';
import { NEVER } from 'rxjs';

import { SaveService } from './save.service';

@Directive({
    selector: '[appSave]'
})
export class SaveDirective implements OnInit {

    @Input() public appSave: any;
    @Output() public submit: EventEmitter<any> = new EventEmitter<any>();
    @Input() public debounce = 500;

    constructor(private saveService: SaveService) { }

    ngOnInit() {
        this.appSave.form.valueChanges
            .pipe(
                debounceTime(this.debounce),
                switchMap(data => {
                    if (this.appSave.valid && !this.appSave.pristine) {
                        window.dispatchEvent(new CustomEvent('showHeader', { detail: true }));
                        return this.saveService.currentStatus$.pipe(
                            map(status => {
                                if (status === 'save') {
                                    this.submit.emit({ data });
                                    status = 'false';
                                    this.saveService.changeStatus('false');
                                    window.dispatchEvent(new CustomEvent('showHeader', { detail: false }));
                                    this.appSave.form.markAsPristine();
                                } else if (status === 'discard') {
                                    console.log('Discarded. Reset form!');
                                    status = 'false';
                                    this.saveService.changeStatus('false');
                                    window.dispatchEvent(new CustomEvent('showHeader', { detail: false }));
                                    return NEVER;
                                }
                            })
                        );
                    } else {
                        return NEVER;
                    }
                })
            )
            .subscribe();
    }
}