Angular und RxJS Importe

Question

Ich habe schon immer gewusst, dass ich meine Observable Operatoren separat importiere, um die Ladezeiten zu begrenzen. Allerdings habe ich heute etwas bemerkt, dass mir hoffentlich jemand erklären könnte.

Ich verwende IntelliJ/WebStorm mit Webpack.

Lassen Sie uns auf eine Seite sagen, in meinem ngOnInit ich einen http-Anruf:

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

Wenn ich der Compiler die Karte Betreiber nicht importieren wird sich beschweren, so dass ich importieren Sie es wie folgt aus:

import 'rxjs/add/operator/map'; 

Alles ist gut in der Welt. Bis ich ein Observable verwenden muss. Also, ich werde eins hinzufügen.

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

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

Jetzt ist der Compiler beschwert mich verständlicherweise, dass es nicht beobachtbare finden, so dass ich IntelliJ/WebStorm es für mich zu importieren und fügt diese an der Spitze meiner Datei:

import {Observable} from 'rxjs'; 

Alles wieder gut . Aber dieser neue Import scheint den Import der Karte irrelevant zu machen. Was ich meine ist, dass, wenn ich die Karte Import entfernen und nur die beobachtbaren man in verlassen, alle kompiliert fein ...

aber wenn ich so beobachtbare importieren angeben:

import {Observable} from 'rxjs/Observable'; 

Dann habe ich muss den Import für den Kartenoperator erneut hinzufügen ...

Ich importiere alle RxJS, wenn ich mein Observable wie folgt importiere?

Wenn ja, wie kann ich IntelliJ sagen, dies nicht zu tun und Klasse zu importieren?

Answer 1

Warum haben Sie nicht eine Datei (zB: rxjs-extensions.ts) mit Ihren erforderlichen rxjs beobachtbaren Klassenerweiterungen und Operatoren?

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

Und dann in Ihrem Hauptmodul (ex app.module.ts) Import aus dieser Datei:

import './rxjs-extensions'; 

Und in der Hauptkomponente (ex: app.component.ts) importieren nur Observavle :

import { Observable } from 'rxjs/Rx'; 

Dies ist, wie es auf dem Hauptwinkel tutorial behandelt wird.

Answer 2

Sie können alle Operatoren durch diese Verwendung:

import * as Rx from "rxjs/Rx"; 

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

Answer 3

ab WebStorm 2016,3 (glaube ich), haben Sie die Möglichkeit, bestimmte Einfuhren auf die schwarze Liste.Editor > Code Style > StypeScript

Do not import exactly from: [rxjs] 

Zusätzlich gibt es ein Flag in tslint globalen Importe zu verbieten:

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