问题 Angular和RxJS导入

我一直都知道要导入我的 Observable 操作员分别限制加载时间。但是我今天注意到了一些事情，我希望有人可以向我解释。

我在Webpack上使用IntelliJ / WebStorm。

让我们说一下我的网页 ngOnInit 我有一个http电话：

 ngOnInit() {  
        this.http.get('https//:google.com').map(e => e);
 }

如果我不导入map运算符，编译器会抱怨，所以我像这样导入它：

import 'rxjs/add/operator/map';

世界上一切都很好。直到我需要使用Observable。所以，我会添加一个。

 ngOnInit() {
        let test = Observable.create(subscriber => {
            return null;
        });

        this.http.get('https//:google.com').map(e => e);
 }

现在编译器可以理解地抱怨它找不到Observable，所以我让IntelliJ / WebStorm为我导入它并将其添加到我的文件顶部：

import {Observable} from 'rxjs';

一切都好了。但是，这个新的导入似乎使地图导入无关紧要。我的意思是，如果我删除了地图导入并且只留下了Observable，那么所有编译都很好......

但是，如果我指定导入Observable，如下所示：

import {Observable} from 'rxjs/Observable';

然后我必须为地图操作员重新添加导入...

我导入我的Observable时是否导入了所有RxJS？

import {Observable} from 'rxjs';

如果是这样，我如何告诉IntelliJ不这样做并仅导入类？

5862

2017-11-22 21:19

起源

那是对的。如果你导入 Observable 从 rxjs 你会导入所有 rxjs运算符和函数（在map中），这是非常糟糕的，因为它增加了文件大小。我不知道你是否可以告诉InteliJ更具体的汽车进口。 - tjoskar

import {Observable} from 'rxjs' 将导入 Rx.d.ts （查看其中的内容;））一切。您需要像这样导入它： import {Observable} from 'rxjs/Observable';。问题不是你“导入”你的范围（花括号之间），而是文件和递归所有的导入需要大量的转换时间我们不需要。 - Aitch

感谢tjoskar和Aitch，现在很清楚了。 - Thibs

答案:

为什么不使用所需的rxjs可观察类扩展和运算符的文件（例如：rxjs-extensions.ts）？

// Observable class extensions
import 'rxjs/add/observable/throw';

// Observable operators
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';

然后在您的主模块（ex app.module.ts）中从此文件导入：

import './rxjs-extensions';

在你的主要组件（例如：app.component.ts）中只需导入Observavle：

import { Observable } from 'rxjs/Rx';

这就是主角度教程中的内容。

2017-11-22 22:26

在我的问题中我没有提到我曾经尝试过这个。所以虽然它可以帮助别人我以前做过这件事。我还不清楚......来自'rxjs';导入了整个东西，事实证明它确实如此..感谢您的回复 - Thibs

从WebStorm 2016.3（我相信）开始，您可以选择将某些导入列入黑名单。 Editor > Code Style > StypeScript

Do not import exactly from: [rxjs]

此外，tslint中还有一个标志可用于禁止全局导入：

{
  "rules": {
    "import-blacklist": [true, "rxjs"]
  }
}

2017-07-12 21:00

您可以使用以下方法使用所有运算符：

import * as Rx from "rxjs/Rx";

Rx.Observable.of(1,2,3,4,5);

-1

2018-04-20 00:08

如角度文档中所述： angular.io/guide/http#enable-rxjs-operators 为了保持尽可能小的尺寸，你应该只导入你使用的。 - TekTimmy

问题 Angular和RxJS导入

答案:

热门问题