Angular和RxJS导入

前端之家收集整理的这篇文章主要介绍了Angular和RxJS导入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我总是知道单独导入我的Observable运算符来限制加载时间.但是我今天注意到了一些事情,我希望有人可以向我解释.

我在Webpack上使用IntelliJ / WebStorm.

让我们说在我的ngOnInit页面上我有一个http调用

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

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

  1. import 'rxjs/add/operator/map';

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

  1. ngOnInit() {
  2. let test = Observable.create(subscriber => {
  3. return null;
  4. });
  5.  
  6. this.http.get('https//:google.com').map(e => e);
  7. }

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

  1. import {Observable} from 'rxjs';

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

但是,如果我指定导入Observable,如下所示:

  1. import {Observable} from 'rxjs/Observable';

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

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

  1. import {Observable} from 'rxjs';

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

为什么不使用所需的rxjs可观察类扩展和运算符的文件(例如:rxjs-extensions.ts)?
  1. // Observable class extensions
  2. import 'rxjs/add/observable/throw';
  3.  
  4. // Observable operators
  5. import 'rxjs/add/operator/do';
  6. import 'rxjs/add/operator/filter';
  7. import 'rxjs/add/operator/map';

然后在您的主模块(ex app.module.ts)中从此文件导入:

  1. import './rxjs-extensions';

在你的主要组件(例如:app.component.ts)中只需导入Observavle:

  1. import { Observable } from 'rxjs/Rx';

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

猜你在找的Angularjs相关文章