Sim*_*m28 5 rxjs typescript angular2-observables rxjs-dom angular
我需要/希望在forkJoin中使用六个以上的参数。当前,基于对另一个相关问题的答案,似乎无法向forkJoin发送超过6个参数。
但是,根据官方文档,它说:“ forkJoin是一个运算符,它接受可作为数组或直接作为参数传递的任意数量的Observable。”
forkJoin-官方文档
好吧,我正在这样做,并且出现错误TS2322:类型'foo'无法分配给类型'bar []'。
在我的研究中,我还发现,如果您有承诺返回不同的类型,最好不要将参数作为数组发送,因为这样会将类型转换为所有相同的类型。- 来源
这是我的代码。我正在使用最新版本的Typescript和Angular 4。
ngOnInit() {
this.spinner.show();
Observable.forkJoin(
this.loadParams(), // Returns an Observable<Object>
this.service.getPromiseType1(), // The rest return Observable<Array>
this.service.getPromiseType2(),
this.service.getPromiseType3(),
this.service.getPromiseType4(),
this.service.getPromiseType5(),
this.service.getPromiseType6(),
).finally(() => this.spinner.hide())
.subscribe(
([param, promise1, promise2, promise3, promise4, promise5, promise6]) => {
this.job = job;
this.value1 = promise1;
this.value2 = promise2;
this.value3 = promise3;
this.value4 = promise4;
this.value5 = promise5;
this.value6 = promise6;
}, (error) => {errorHandlingFunction}
});
Run Code Online (Sandbox Code Playgroud)
如果我删除任何单个参数,以便将六个参数传递给forkJoin,它就可以正常工作。所以我的问题是,在我想一次调用一次加载对象可观察对象和后续数组可观察对象的情况下,还有另一种方法吗?这是forkJoin的错误,因为官方文档说它应该能够接受任意数量的Observables?
我试图创建一个类型为Observable的数组,并在forkJoin中使用array.forEach(),但是它抱怨返回的是void类型。无论如何,这似乎是一种不灵活的方式。
小智 9
从 rxJs 6.5 版本开始,您可以使用值字典将任意数量的可观察量放入 forkJoin 中,请参阅此处的第一个示例
forkJoin({first: of(1), second: of(2), third: of(3)})
.subscribe(result => {console.log(result.first)});
Run Code Online (Sandbox Code Playgroud)
正如您链接的问题中的答案所解释的那样,参数的最大数量仅受类型定义的约束——不受运行时源本身的约束。类型定义很有用,因为它们声明了将为可观察流的下一步生成的数组元素类型([param, promise1, promise2, ...]在您的情况下是类型)。
听起来像订阅处理程序中分配的严格类型安全是导致您出现问题的原因。由于您有 6 个以上的 observable,它会将结果参数默认为共享类型,该类型可能与您尝试分配的字段类型不匹配。
有几种方法可以解决这个问题。您可以在订阅处理程序中转换参数,也可以自己添加自己的类型。强制转换参数是快速而肮脏的解决方案,但它会导致您失去类型安全性。自己添加类型可以让您保持类型安全,但这也可能意味着您最终会得到任意数量的工厂方法声明。将以下内容放在*.d.ts项目中任何位置的类型定义文件 ( ) 中。我喜欢将这样的类型定义放在typings/我app/目录的同级目录中。
import { Observable, SubscribableOrPromise } from 'rxjs/Observable';
declare module 'rxjs/observable/ForkJoinObservable' {
namespace ForkJoinObservable {
export function create<T, T2, T3, T4, T5, T6, T7>(v1: SubscribableOrPromise<T>, v2: SubscribableOrPromise<T2>, v3: SubscribableOrPromise<T3>, v4: SubscribableOrPromise<T4>, v5: SubscribableOrPromise<T5>, v6: SubscribableOrPromise<T6>, v7: SubscribableOrPromise<T7>): Observable<[T, T2, T3, T4, T5, T6, T7]>;
export function create<T, T2, T3, T4, T5, T6, T7, R>(v1: SubscribableOrPromise<T>, v2: SubscribableOrPromise<T2>, v3: SubscribableOrPromise<T3>, v4: SubscribableOrPromise<T4>, v5: SubscribableOrPromise<T5>, v6: SubscribableOrPromise<T6>, v7: SubscribableOrPromise<T7>, project: (v1: T, v2: T2, v3: T3, v4: T4, v5: T5, v6: T6, v7: T7) => R): Observable<R>;
}
}
Run Code Online (Sandbox Code Playgroud)
这个过程在声明合并的 TypeScript 文档页面中有更详细的解释。
编辑:看起来我使用的是旧版本的 RxJS,此后结构发生了一些变化。以下应该更接近于适用于当前结构的类型声明:
declare module 'rxjs/Observable' {
namespace Observable {
export function forkJoin<T, T2, T3, T4, T5, T6, T7>(sources: [ObservableInput<T>, ObservableInput<T2>, ObservableInput<T3>, ObservableInput<T4>, ObservableInput<T5>, ObservableInput<T6>, ObservableInput<T7>]): Observable<[T, T2, T3, T4, T5, T6, T7]>;
export function forkJoin<T, T2, T3, T4, T5, T6, T7>(v1: ObservableInput<T>, v2: ObservableInput<T2>, v3: ObservableInput<T3>, v4: ObservableInput<T4>, v5: ObservableInput<T5>, v6: ObservableInput<T6>, v7: ObservableInput<T7>): Observable<[T, T2, T3, T4, T5, T6, T7]>;
}
}
Run Code Online (Sandbox Code Playgroud)
我将这些基于当前的forkJoin类型声明。
至于模块扩充,上面的代码修改了绝对路径定义的模块的类型声明'rxjs/Observable'。这与导入Observable类时将使用的导入路径相同。RxJS 定义的模块导出Observable类及其字段。我们对该模块的扩充通过使用namespace块来修改它。这允许我们在Observable命名空间下添加类型声明(例如,类型声明 for Observable.myFunctionOrField),这看起来与在其上调用静态函数相同。实际上,这声明了附加Observable.forkJoin功能的可能性。
感谢@MikeHill 让我指出正确的方向。最终对我有用的解决方案是将typings.d.ts 添加到angular-cli 生成的src 文件夹中。我相信您也可以在同一位置使用 Typings 文件夹,但您需要更新您的 tsconfig.app.json 文件,有关更多信息,请参阅本文。https://github.com/angular/angular-cli/blob/6449a753641340d8fc19a752e1a1ced75f974efa/docs/documentation/1-x/stories/third-party-lib.md
带有 forkJoin 的 7 个参数的typings.d.ts
import { ObservableInput, Observable } from 'rxjs';
import { forkJoin } from 'rxjs/internal/observable/forkJoin';
declare module 'rxjs/internal/observable/forkJoin' {
export function forkJoin<T, T2, T3, T4, T5, T6, T7>(
sources: [
ObservableInput<T>,
ObservableInput<T2>,
ObservableInput<T3>,
ObservableInput<T4>,
ObservableInput<T5>,
ObservableInput<T6>,
ObservableInput<T7>
],
): Observable<[T, T2, T3, T4, T5, T6, T7]>;
export function forkJoin<T, T2, T3, T4, T5, T6, T7>(
v1: ObservableInput<T>,
v2: ObservableInput<T2>,
v3: ObservableInput<T3>,
v4: ObservableInput<T4>,
v5: ObservableInput<T5>,
v6: ObservableInput<T6>,
v7: ObservableInput<T7>,
): Observable<[T, T2, T3, T4, T5, T6, T7]>;
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
3019 次 |
| 最近记录: |