缺少可观察的方法 RxJS 5.0.0-beta.0

Posted

技术标签:

【中文标题】缺少可观察的方法 RxJS 5.0.0-beta.0【英文标题】:Missing observable methods RxJS 5.0.0-beta.0 【发布时间】:2016-04-05 13:45:20 【问题描述】:

我在使用带有 Angular 2 的 RxJS 时遇到问题。Typescript 定义文件中建议的大多数方法都没有在我的 Observable 对象上定义,例如...

然后我发现,Observable 原型上不存在这些方法。

我知道从第 4 版到第 5 版发生了很多变化,所以我错过了什么吗?

Browserify 为我添加了它...

【问题讨论】:

【参考方案1】:

没有看到您的实际代码,我无法确切告诉您要添加什么来修复它。

但普遍的问题是:RxJS 5 不再包含在 Angular 2 中,因为它已经进入了 Beta 阶段。您将需要导入所需的运算符,或全部导入。导入语句如下所示:

import 'rxjs/add/operator/map'; // imports just map
import 'rxjs/add/operator/mergeMap'; // just mergeMap
import 'rxjs/add/operator/switchMap'; // just switchMap
import delay from 'rxjs/operator/delay'; // just delay

或喜欢

import 'rxjs/Rx'; // import everything

要确定所需模块的路径,请查看source tree。每次使用add 导入都会将属性添加到ObservableObservable.prototype。如果没有add,您需要使用import foo from 'rxjs/path/to/foo'

您还需要确保将 RxJS 正确地引入项目。像这样的东西会进入你的 index.html 文件:

System.config(
    map: 
        'rxjs': 'node_modules/rxjs' // this tells the app where to find the above import statement code
    ,
    packages: 
        'app': defaultExtension: 'js', // if your app in the `app` folder
        'rxjs': defaultExtension: 'js'
    
);
System.import('app/app'); // main file is `app/app.ts` 

如果您使用 Webpack to build the Angular 2 app like in this Github project(就像我一样),那么您不需要 System 的东西,导入应该这样做。

【讨论】:

【参考方案2】:

我的项目中有一个 JSPM 设置,因此将 rxjs 添加到路径部分是不够的。

jspm 在我的 SystemJS 配置(地图部分)中添加了以下内容:

"npm:angular2@2.0.0-beta.6": 
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "es6-promise": "npm:es6-promise@3.1.2",
  "es6-shim": "npm:es6-shim@0.33.13",
  "process": "github:jspm/nodelibs-process@0.1.2",
  "reflect-metadata": "npm:reflect-metadata@0.1.2",
  "rxjs": "npm:rxjs@5.0.0-beta.0",
  "zone.js": "npm:zone.js@0.5.14"
,

因此,如果您使用 jspm,请确保删除上面的 rxjs 映射,否则某些 rxjs 文件将被加载两次,一次通过 jspm_packages,一次通过 node_modules。

【讨论】:

【参考方案3】:

是的,在 Angular 2.0 中,您必须包含您需要的操作符/可观察对象。

我是这样做的:

import 'rxjs/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';
import 'rxjs/observable/interval';
import 'rxjs/observable/forkJoin';
import 'rxjs/observable/fromEvent';

不过,你还需要在 System.js 中进行配置

System.config(
            defaultJSExtensions: true,
            paths: 
                'rxjs/observable/*' : './node_modules/rxjs/add/observable/*.js',
                'rxjs/operator/*' : './node_modules/rxjs/add/operator/*.js',
                'rxjs/*' : './node_modules/rxjs/*.js'
            
        );

这是工作代码:https://github.com/thelgevold/angular-2-samples

【讨论】:

以上是关于缺少可观察的方法 RxJS 5.0.0-beta.0的主要内容,如果未能解决你的问题,请参考以下文章

Angular2 rxjs 缺少 observable.interval 方法

每次传入可观察值(RxJS)时调用方法

rxjs中常用的操作符

RXJS可观察的方法.pipe()和.subscribe()之间的差异

在注册之前验证可观察的响应以执行多个请求(iff)-RxJs

如何在可观察的地图中抛出Error(rxjs6,ng6)