Question

我是Angular2的新手。我正在尝试使用虚拟应用程序来学习它。

我最近经历了一个关于RxJS的教程并且对Observables进行了基本的保持（或至少我假设如此）。基于此，我有一个想法是从服务中的数组中返回一个用户列表作为流。我打算使用间隔，并在屏幕上显示一种延迟加载效果。

我的意图是：

getUsers() {
        return Rx.Observable.from(this.users); //want to add interval too on this 
    }

但是，我坚持将'Rx'导入我的服务。没有导入使用'Rx'显然会给我错误。 Observables和运算符的其余导入工作正常。

我去了node_modules，发现还有一个rx和一个rxjs模块。但不知何故使用以下任何一个命令，我无法摆脱Rx上的错误。

import 'rxjs/Rx';
import  Rx from 'rxjs/Rx';
import { Rx} from 'rx/Rx';
import { Rx} from 'rx';

我经历了几个关于那些说Rx不再与Angular捆绑在一起的链接。但是，我正在使用最新的有角度的官方种子，我确实看到rx和rxjs包。我在5.0.1中提到了package.json版本。我在这里做错了吗？

请告诉我如何使用Angular 2中的Rx创建自定义可观察量。

注意：Http服务使用Observable返回没有问题，只想使用数组从头创建一个Observable

Answer 1

如果您想添加间隔，

import { Observable } from 'rxjs/Observable';

return Observable.from(this.users);

你可以这样做。

Answer 2

rxjs应该已经作为项目中的依赖项了。您可以在其官方自述页面上阅读如何正确导入RxJS：https://github.com/ReactiveX/rxjs/#installation-and-usage

最容易使用：

import {Observable} from 'rxjs';

请注意，这与仅使用import {Rx} from 'rxjs';不同，因为这会在Rx中查找名为rxjs/Rx.d.ts的导出属性，但不存在此类属性。

rx包是旧的RxJS 4，因此您绝对不想将它与Angualr2一起使用。

Answer 3

你可以像这样导入rxjs。

import Rx from 'rxjs';

在这样的systemjs.config.js文件中。

 rxjs: {
    defaultExtension: 'js',
      main: 'Rx.js'
  }

Answer 4

在system.config.js中确保您的配置对象具有以下内容： -

var map = {
    'rxjs': 'node_modules/rxjs'
}

var packages = {
    'rxjs': {defaultExtension: 'js'}
}

System.config({
    map: map,
    packages: packages
});

在您的组件中，您只需要import 'rxjs/Rx';，您就可以在rxjs中使用任何内容，或者可以import { Observable } from 'rxjs/Observable';等。

Answer 5

如果代码中的所有内容都很完美，那么可能是System.js兼容性问题

卸载rxjs
检查map以获取Angular依赖关系列表
安装与Angular正在使用的完全相同的rxjs版本

出于某种原因，如果您安装的版本和Angular使用的版本不同，则rxjs导入可能会中断。

来源：我刚遇到同样的问题。

Answer 6

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/takeWhile';

在组件中导入它，然后将下面的代码包装到函数中以实现您想要的功能

Observable
      .interval(100)
      .takeWhile(x => x < 10)
      .subscribe(x => { console.log(x); });

Answer 7

在angluar 4 +中：

import * as Rx from 'rxjs/Rx';

修复此问题后，Rxjs文档仍然存在错误。

Reactive Manual Installation

无法将'Rx'导入我的Angular 2应用程序

7 个答案: