web-dev-qa-db-ja.com

AngularおよびRxJSのインポート

読み込み時間を制限するために、Observable演算子を個別にインポートすることを常に知っていました。しかし、今日、誰かが私に説明してくれることを願っている何かに気づきました。

IntelliJ/WebStormをWebpackで使用しています。

ngOnInitのページでhttp呼び出しがあるとしましょう。

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

マップ演算子をインポートしないと、コンパイラが文句を言うので、次のようにインポートします。

import 'rxjs/add/operator/map';

すべてが世界で良いです。 Observableを使用する必要があるまで。だから、1つ追加します。

 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にそれを行わず、クラスのみをインポートするように指示できますか？

angularintellij-ideawebstormrxjs5
11
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';

次に、メインモジュール（例：app.module.ts）でこのファイルからインポートします。

import './rxjs-extensions';

そして、メインコンポーネント（例：app.component.ts）にObservavleをインポートするだけです：

import { Observable } from 'rxjs/Rx';

これは、メインのangularチュートリアルでカバーされている方法です。

13
FRECIA

WebStorm 2016.3（私は信じています）から、特定のインポートをブラックリストに登録するオプションがあります。 Editor > Code Style > StypeScript

Do not import exactly from: [rxjs]

さらに、グローバルインポートを禁止するためにtslintで使用可能なフラグがあります。

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