Javascript Angular2 RxJS 获取“Observable_1.Observable.fromEvent 不是函数”错误

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34397162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:16:32  来源:igfitidea点击:

Angular2 RxJS getting 'Observable_1.Observable.fromEvent is not a function' error

javascriptangulartypescriptrxjsreactive-extensions-js

提问by Michael Oryl

I'm using AngularJS 2 Beta 0 and I'm trying to create an RxJS Observable from an event on a window object. I believe I know the formula for capturing the event as an Observable in my service:

我正在使用 AngularJS 2 Beta 0 并且我正在尝试从窗口对象上的事件创建一个 RxJS Observable。我相信我知道在我的服务中将事件捕获为 Observable 的公式:

var observ = Observable.fromEvent(this.windowHandle, 'hashchange');

The problem is that every time I try run this code, I get an error stating that 'fromEvent' is not a function.

问题是,每次我尝试运行此代码时,都会收到一条错误消息,指出“fromEvent”不是函数。

Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: Observable_1.Observable.fromEvent is not a function

This seems to imply to me that I'm not handling my importcorrectly now that RxJS is not included in the build of Angular 2, though the rest of my application functions properly, which to me means that RxJS is where it is supposed to be.

这对我来说似乎意味着我没有import正确处理我的问题,因为 RxJS 没有包含在 Angular 2 的构建中,尽管我的应用程序的其余部分运行正常,这对我来说意味着 RxJS 是它应该在的地方。

My import in the service looks like this:

我在服务中的导入如下所示:

import {Observable} from 'rxjs/Observable';

Though I have also tried to use this instead (with the appropriate changes to the code), with the same results:

虽然我也尝试使用它(对代码进行适当的更改),但结果相同:

import {FromEventObservable} from 'rxjs/observable/fromEvent';

I have the following configuration in my Index.html:

我的 Index.html 中有以下配置:

<script>
    System.config({
        map: {
            rxjs: 'node_modules/rxjs'
        },
        packages: {
            'app': {defaultExtension: 'js'},
            'rxjs': {defaultExtension: 'js'}
        }
    });
    System.import('app/app');
</script>

Can somebody tell me what I'm doing incorrectly?

有人可以告诉我我做错了什么吗?

回答by sclausen

Its definitly not needed to import all operators at once! You just imported fromEventwrong. You could do it like this:

绝对不需要一次导入所有运算符!你刚才输入fromEvent错了。你可以这样做:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

EDIT: In addititon to what I already wrote: tree-shaking with the AoT-Compiler of angular removes unused code, based on what you import. If you just import some objects or functions from rxjs/rx, the compiler can't remove anything. Always import just, what you need!

编辑:除了我已经写过的内容之外:使用 angular 的 AoT 编译器进行 tree-shaking 会根据您导入的内容删除未使用的代码。如果只是从 rxjs/rx 导入一些对象或函数,编译器将无法删除任何内容。始终只导入您需要的东西!

回答by Michael Oryl

The problem seemed to be that the import statement should look like this:

问题似乎是导入语句应该是这样的:

import {Observable} from 'rxjs/Rx';

Note that Observableis being brought in from rxjs/Rxinstead of from rxjs/Observable. As @EricMartinez mentions, pulling it in this way will automagically get you all of the operators (like .map()).

请注意,Observable是从 fromrxjs/Rx而不是 from引入的rxjs/Observable正如@EricMartinez 提到的,以这种方式拉动它会自动为您提供所有操作符(如.map())。