我應該從'@ rxjs / Observable'使用`import'rxjs / Rx'`和`import {Observable}

Question

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Observable } from '@rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/observable/throw';
@Component({});
export shellModule{}

這是我從某個地方復制的Angular應用程序的一段代碼（我已經刪除了導出模塊中的定義。我正在使用它來創建一個調用API的服務。

在此特定文件的導入中，為什么即使已導入整個rxjs，也會單獨導入Observable。 如果整個導入特定模塊，為什么單獨導入特定對象？ 我嘗試在論壇上提出這個問題，但我沒有回答。 我想知道這是否有助於優化代碼。

Answer 1

一般來說 ：

在Typescript中， 處理模塊的方式要求您使用import * as rx from 'rxjs/Rx'加載整個庫，或者使用庫中的特定導出模塊來使用它，因此編譯器加載到類型。

將導入僅減少到您需要的特定模塊會設置您的應用程序，以使用Angular的AOT編譯中的樹震動。 這不是由typescript編譯器完成的，而是由一個名為rollup的工具完成的 。 因此，它可以幫助稍后優化代碼，但它不會自動執行此操作。

就編譯開銷而言，引入整個庫可能會減慢編譯器的速度......但除了大量復雜的庫之外，這不是一個非常強大的要點。

我個人而言，更喜歡在特定模塊中導入，因為它使調用代碼更加清晰，因為我不需要使用該全局名稱來獲取特定名稱。 rx.Observable vs Observable 。 一個很好的例子是lodash庫（rxjs有點復雜......）

老實說，導入整個庫就像你在那里的行： import 'rxjs/Rx'對我來說沒有意義。 您應該只導入特定的導出模塊。 嘗試刪除它，看看你得到了什么錯誤，然后使用* as rx語法。

就rxjs而言 - 當你想要像這個問題一樣導入特定的運算符時，它有點不穩定 - 所以獲取特定運算符的方法是： import 'rxjs/add/observable/from' - 但這也需要修改使用您的webpack設置，如引用問題的答案中所述 。

Answer 2

讓我們看看rxjs/Rx模塊導出的內容：

export { Subject, AnonymousSubject } from './Subject';
export { Observable } from './Observable';
export { Operator } from './Operator';
export { Observer } from './Observer';
export { Subscription } from './Subscription';
export { Subscriber } from './Subscriber';
export { AsyncSubject } from './AsyncSubject';
export { ReplaySubject } from './ReplaySubject';
export { BehaviorSubject } from './BehaviorSubject';
...

import './add/observable/bindCallback';
import './add/observable/bindNodeCallback';
import './add/observable/combineLatest';
...

因此它導出RxJs類並從add文件夾導入運算符。 因此，您可以看到它加載庫中的所有內容。 它不會導出任何全局對象。 所以你需要像這樣使用命名導出：

import * as Rx from 'rxjs/Rx'

能夠使用導出的類：

Rx.Observable.of(12, 3);

這模擬了使用bundle（全局Rx對象）加載庫時的內容：

<script src="rxjs/bundles/Rx.js">

如果要在沒有Rx全局對象的情況下使用Observable ，則需要單獨導入它：

import { Observable } from '@rxjs/Observable';
Observable.of(1);

導入兩者

import { Observable } from '@rxjs/Observable';
import 'rxjs/Rx';

這不是一個好習慣，但如果您不想單獨導入每個運算符，則可以使用它。

另請參閱如何從rxjs包正確導入運算符 。