Angular和RxJS进口

问题描述：

我一直都知道分别导入我的Observable运营商来限制加载时间。不过，我注意到今天有些事情，我希望有人能向我解释。Angular和RxJS进口

我正在使用IntelliJ/WebStorm和Webpack。

让我ngOnInit页面我有一个HTTP调用上说：

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

如果我不导入地图运营商，编译器会抱怨，所以我将其导入这样的：

import 'rxjs/add/operator/map';

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

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

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

现在，编译器可以理解抱怨说，它无法找到可观的，所以我得到的IntelliJ/WebStorm导入对我和我的文件的顶部添加此：

import {Observable} from 'rxjs';

一切都很好再次。但是，这个新的导入似乎使地图导入无关紧要。我的意思是，如果我删除地图导入和刚刚离开的可观测之一，所有的编译罚款......

但是，如果我指定要导入可观察到这样的：

import {Observable} from 'rxjs/Observable';

然后我必须重新添加导入地图运算符...

我导入所有的RxJS时，我导入我的Observable这样？

import {Observable} from 'rxjs';

如果是这样，我该如何告诉IntelliJ不要那样做，只导入类？

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

从'rxjs''导入{Observable}将导入'Rx.d.ts'（检查它中的内容;）），它是** everything **。您需要像这样导入它：'从'rxjs/Observable';'导入{Observable}。问题不在于你向作用域（在花括号之间）导入的内容，而是文件和递归导入所有需要花费大量我们不需要的转译时间的东西。 – Aitch

谢谢tjoskar和Aitch，现在已经很清楚了。 – Thibs

答

为什么不用一个文件（例如：rxjs-extensions.ts）与你需要的rxjs可观察类的扩展名和运算符？

// 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';

然后你的主模块（前app.module.ts）从该文件导入：

import './rxjs-extensions';

而在你的主要成分（例如：app.component.ts）刚刚导入Observavle ：

import { Observable } from 'rxjs/Rx';

这就是它在主要角度教程中的介绍。

我没有提到我的问题，我曾尝试过这个。所以虽然它可以帮助别人，我以前做过这个。我只是不清楚，如果...从'rxjs';导入整个事情，事实证明它.. ..感谢您的答复，虽然 – Thibs

答

您可以使用此使用所有运营商：

import * as Rx from "rxjs/Rx"; 

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

正如角文件中所述：https：//angular.io/guide/http#enable-rxjs-operators保持大小一样小可能你应该只导入你使用的东西。 – TekTimmy

答

从WebStorm 2016.3（我相信）开始，你有一个选项，列入黑名单的某些进口。Editor > Code Style > StypeScript

Do not import exactly from: [rxjs]

此外，还有在tslint提供一个标志，禁止全球进口：

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

Angular和RxJS进口

相关推荐