Angular2 Observable.forkJoin of observable variables - ReferenceError: Observable is not defined

Question

我想请你帮忙。我省略了我认为不重要的代码。让我们想象一下包含服务调用的 TS 文件：

// 文件：someService.ts

@Injectable()
export class SomeService {
     method1(){
         var observable = this.http.get(someUrl)
                          .map((res: Response) =><MyClass[]>res.json());
         return observable;
     }

     method2(){
         // Similar to method1
     }
}

// 文件：someComponent.ts

请注意，this.method1observable 和 method2observable 是从父（根）组件正确分配的，它们的类型是 Observable。

import {Observable}     from 'rxjs/Observable';

export class SomeClass {
    public m1: Observable<MyClass[]>;
    public m2: Observable<AnotherClass[]>

    ngOnInit() {
        Observable.forkJoin(this.m1,this.m2) //<- ERROR HERE
        .subscribe(data => {
            this.myFunction(data[0], data[1]);
            requestAnimationFrame(this.renderLoop);
        });
    }
}

我得到 "Uncaught ReferenceError: Observable is not defined"。你不知道我做错了什么吗？我看到了一些在服务内部调用 Observable.forkJoin 的示例。但是如果我想在组件内部调用它呢？

Answer 1

你可以试试这样导入：

import {Observable} from 'rxjs/Rx';

而不是：

import {Observable} from 'rxjs/Observable';

您还应该使用数组将您的可观察对象提供给 forkJoin 方法：

ngOnInit() {
        Observable.forkJoin([this.m1,this.m2])
        .subscribe(data => {
            this.myFunction(data[0], data[1]);
            requestAnimationFrame(this.renderLoop);
        });
    }

并且不要忘记在@Component 中指定输入：

@Component({
    inputs: ['m1', 'm2']
})

Answer 2

您可以参考此 link 以获取有关使用 forkjoin() 方法运行多个并发的更多信息 http.get() requests.Here 您可以获得完整的工作例如。

http://www.metaltoad.com/blog/angular-2-http-observables

Answer 3

您应该避免导入整个 rxjs 库，因为它很大。如果您的应用程序中有以下导入 anywhere，您将导入整个 rxjs，所以请记住这一点：

import {Observable} from 'rxjs';

或

import {Observable} from 'rxjs/Rx';

您可以改为导入您将要使用的个别功能，例如：

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/forkJoin';

更新： 从 rxjs 5.5 开始，the recommended way to import operators is：

import { range } from 'rxjs/observable/range';
import { map, filter, scan } from 'rxjs/operators';

const source$ = range(0, 10);

source$.pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
)
.subscribe(x => console.log(x))

Angular2 Observable.forkJoin of observable variables - ReferenceError: Observable is not defined

Angular2 Observable.forkJoin of observable variables - ReferenceError: Observable is not defined

system.reactive

typescript

angular