可观察变量的Angular2 Observable.forkJoin - ReferenceError:未定义Observable

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
     }
}

// file: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);
        });
    }
}

我得到"未捕获的ReferenceError:未定义Observable".你不知道我做错了什么吗？我看到了一些在服务中调用Observable.forkJoin的例子.但是如果我想在组件中调用它呢？

Answer 1

您可以尝试以这种方式导入:

import {Observable} from 'rxjs/Rx';

代替:

import {Observable} from 'rxjs/Observable';

您还应该使用数组为forkJoin方法提供您的observable:

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

你应该避免导入整个rxjs库,因为它很大.如果您的应用程序中的任何位置都有以下导入,那么您将导入整个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开始,导入运算符的推荐方法是:

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))