如何仅获得 Angular 6 rxjs 中的最后一个可观察输出答案

【问题标题】：How do I get only the last observable output in Angular 6 rxjs如何仅获得 Angular 6 rxjs 中的最后一个可观察输出
【发布时间】：2019-07-21 20:23:54
【问题描述】：

我有一个从不同组件获取 form.valueChanges 的 observable。

我需要第一个输出来将工具栏标题设置为可见window.dispatchEvent(new CustomEvent('showHeader', { detail: true })) 然后我需要等待用户输入status。

这是我的挑战：当status === true 我只想要最后一个可观察的输出（因为它包含所有表单更改）。此处显示的代码有效，但每个可观察输出保存一次。

我花了几个小时浏览 rxjs 文档和关于 SO 的答案，但无济于事。我曾尝试切换到主题，但这显然不是要走的路，还有其他几次尝试，现在我很确定（！）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 }));
                    }
                })
            }
        });
    }
}

【问题讨论】：

BehaviorSubject 可以帮忙吗？
试过了，但没有得到更好的结果（并且在几篇文章中不建议受试者使用这种 Observables（外部，我相信它是热门的））。但是谢谢@DavidR
有一个takeLast 运算符。 rxjs-dev.firebaseapp.com/api/operators/takeLast
takeLast 运算符获取输出的最后一个值。我只想要整个最后的输出。谢谢

标签： angular rxjs

【解决方案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/

【讨论】：

谢谢 muhamamd-omar-muneer 我会看看我是否可以让这个工作。并感谢文章链接?

【解决方案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();
    }
}

【讨论】：