如何在同一管道中管道两个数据流/可观察量?

Question

我在一个视图中有两个表单，每个表单输出更改。我有一个全局指令，有两个选择器来获取两个流。

我可以轻松处理一个表单，但是当我有两个表单时，并将每个表单放在自己的管道或指令中，可以这么说，它们会相互混淆保存功能，所以我需要在同一管道中同时使用它们。(或另一种解决方案;)

表单组件

<form name="shop_info"
autocomplete="off"
#f1="ngForm"
(SubmitShop)="save($event)"
[SaveShop]="f1"
*ngIf="merchant">
...
</form>
...
<form name="region"
autocomplete="off"
#f2="ngForm"
(SubmitRegion)="save($event)"
[SaveRegion]="f2">
...
</form>

具有一个流的指令：

@Directive({
selector: '[SaveShop], [SaveRegion]'
})
export class SaveMerchantDirective implements OnInit {
@Input() SaveShop: any;
@Input() SaveRegion: any;
@Output() SubmitShop: EventEmitter<any> = new EventEmitter<any>();
@Output() SubmitRegion: EventEmitter<any> = new EventEmitter<any>();
@Input() debounce = 350;
constructor(
private saveService: SaveService,
private $transitions: TransitionService
) { }
ngOnInit() {
this.saveRegion.form.valueChanges
.pipe(
debounceTime(this.debounce),
switchMap((data: Object) => {
if (!sessionStorage.getItem('dataRegion') || sessionStorage.getItem('dataRegion') === '{}') {
sessionStorage.setItem('dataRegion', JSON.stringify(data));
}
this.$transitions.onBefore({}, () => {
if (this.saveRegion.valid && !this.saveRegion.pristine) {
if (confirm(this.translate.instant(
'You are about to discard your REGION changes. Click "OK" to discard and navigate away! Click "Cancel" to stay.'
))) {
this.discard();
return true;
} else {
return false;
}
}
});
if (this.saveRegion.valid && !this.saveRegion.pristine) {
window.dispatchEvent(new CustomEvent('showHeader', { detail: true }));
return this.saveService.currentStatus$.pipe(
map(status => {
if (status === 'save') {
this.save(data);
} else if (status === 'discard') {
this.discard();
}
})
);
} else {
return NEVER;
}
})
)
.subscribe();
this.$transitions.onExit({}, () => {
sessionStorage.removeItem('dataRegion');
status = 'false';
this.saveService.changeStatus('false');
});

我该如何处理？

我可以简单地做：

combineLatest(this.saveRegion.form.valueChanges, this.saveShop.form.valueChanges)
.pipe(
debounceTime(this.debounce),
switchMap((data: Array<Object>) => {...

编辑：

行为

Observable.combineLatest(
this.saveShop.form.valueChanges,
this.saveRegion.form.valueChanges
)
.subscribe(...

给Property 'combineLatest' does not exist on type 'typeof Observable'.

行为

combineLatest(
this.saveShop.form.valueChanges,
this.saveRegion.form.valueChanges
)
.subscribe(...

给了我几个问题，其中一个是"表单"无法读取未定义的(因为两个流不会同时出现，一个是未定义的(。 如果我添加startWith(null)我会得到this.saveShop.form.valueChanges.startWith is not a function

Answer 1

如果我添加startWith(null(，我会得到this.saveShop.form.valueChanges.startWith不是一个函数

这至少很容易解决：不推荐使用运算符(如果您从正确的文件中导入了"正确的"startWith，可能仍然有效(，而是使用.pipe(就像您对其他运算符所做的那样：debounceTime，switchMap(，所以

this.saveRegion.form.valueChanges.pipe(startWith(null)) //...

(或者，concat(of(null), this.saveRegion.form.valueChanges)可以(。

另一件事：您可以filter出任何未定义/null值，只需使用"好东西"，如下所示

combineLatest(
this.saveShop.form.valueChanges.pipe(filter(value => Boolean(value)),
this.saveRegion.form.valueChanges.pipe(filter(value => Boolean(value)),
//...