Scheduler.async的RxJS依赖问题

时间:2017-06-03 11:24:32

标签: angular typescript rxjs rxjs5

我在Angular2组件类的构造函数中有以下代码:

var observable = Observable.create(function (observer) {
      observer.next(1);
      observer.next(2);
      observer.next(3);
      observer.complete();
    }).observeOn(Scheduler.async);

我导入包含以下内容:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/observeOn';
import { Scheduler } from 'rxjs/Scheduler';
import 'rxjs/scheduler/async';

我也尝试了以下导入,而不是上面的上一次导入:

import { async } from 'rxjs/scheduler/async';

使用Angulat CLI构建项目时出现以下错误消息:

Property 'async' does not exist on type 'typeof Scheduler'

我错过了什么?

3 个答案:

答案 0 :(得分:6)

是的,这是正确的,因为:

import { Scheduler } from 'rxjs/Scheduler';

这意味着,您导入了此类:https://github.com/ReactiveX/rxjs/blob/5.4.0/src/Scheduler.ts#L8-L63

import { async } from 'rxjs/scheduler/async';

https://github.com/ReactiveX/rxjs/blob/5.4.0/src/scheduler/async.ts#L47

所以你可以看到,Scheduler没有async属性,我想你想转换这个东西Rx.Scheduler.async source code here,你可以尝试这个解决方案:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/observeOn';

import { async } from 'rxjs/scheduler/async';

var observable = Observable.create(function (observer) {
      observer.next(1);
      observer.next(2);
      observer.next(3);
      observer.complete();
    }).observeOn(async);

答案 1 :(得分:6)

我认为这值得深入解释。

如果你只写:

import { Scheduler } from 'rxjs/Scheduler';

您只导入了您可能永远不想自己使用的Scheduler类。仅将其导入以进行正确的类型检查非常有用,例如:

import { Scheduler } from 'rxjs/Scheduler';

class MyClass {
    sched: Scheduler;
}

但仅导入async您正在导入already existing instance of an AsyncScheduler class。这是一个单例模式,因为通常不需要有多个AsyncScheduler个实例。

import { async } from 'rxjs/scheduler/async';

现在您可以查看此特定调度程序的当前时间:

async.now();

事实上,从rxjs/scheduler/async导入与使用仅从Scheduler导入的rxjs相同,实际上是Rx.ts

import { Scheduler } from 'rxjs';

...

Scheduler.async.now();

您可以看到已经准备了更多不同的调度程序:https://github.com/ReactiveX/rxjs/blob/master/src/Rx.ts#L193-L198

这里令人困惑的是使用async中的'rxjs/scheduler/async'Scheduler.async中的'rxjs'之间的区别。 The async from Rx.ts just imports the same 'rxjs/scheduler/async'但是,由于您要导入rxjs,因此您还要包含Rx.ts中定义的所有依赖项。这意味着您要导入所有操作符,这些操作符是您可能不需要的许多文件。

这就是为什么最好只从'rxjs/scheduler/async'而不是'rxjs'导入它:

import { async } from 'rxjs/scheduler/async'

答案 2 :(得分:1)

我知道这是为标记的,但是如果您着陆在这里并且对其他答案为何不起作用感到困惑,我认为调度程序的位置在v6中再次移动。我有一个webpack开发环境,必须从裸rxjs模块中删除调度程序。如果检查导入的模块,则可以看到所有调度程序:

import * as rxjs from "rxjs";
console.log(Object.keys(rxjs).filter(k => k.includes("Scheduler")));

将打印:

"asapScheduler"
"asyncScheduler"
"queueScheduler"
"animationFrameScheduler"
"VirtualTimeScheduler"
"Scheduler"

因此,如果您想要async计划程序,则可以执行以下操作:

import {asyncScheduler} from "rxjs";