Angular и импорт RxJS

Я всегда знал, чтобы импортировать мои операторы Observable отдельно, чтобы ограничить время загрузки. Однако сегодня я заметил кое-что, что, надеюсь, кто-то может мне объяснить.

Я использую IntelliJ/WebStorm с Webpack.

Скажем, на странице в моем ngOnInit у меня есть http-вызов:

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

Если я не импортирую оператор карты, компилятор будет жаловаться, поэтому я импортирую его следующим образом:

import 'rxjs/add/operator/map';

Все хорошо в мире. Пока я не буду использовать Наблюдаемый. Итак, я добавлю.

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

Затем я должен повторно добавить импорт для оператора карты...

Я импортирую все RxJS, когда я импортирую свой Наблюдаемый, как это?

import {Observable} from 'rxjs';

Если да, то как я могу сказать IntelliJ не делать этого и импортировать только класс?

Ответы

Ответ 1

Почему бы не иметь файл (ex: 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';

И затем в вашем основном модуле (ex app.module.ts) импортируйте из этого файла:

import './rxjs-extensions';

И в вашем основном компоненте (например: app.component.ts) просто импортируйте Observavle:

import { Observable } from 'rxjs/Rx';

Вот как это описано в главном учебнике angular.

Ответ 2

Начиная с WebStorm 2016.3 (я считаю), у вас есть возможность занести в черный список определенный импорт. Editor > Code Style > StypeScript

Do not import exactly from: [rxjs]

Кроме того, в tslint имеется флаг, запрещающий глобальный импорт:

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

Ответ 3

Вы можете использовать все операторы, используя это:

import * as Rx from "rxjs/Rx";

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