如下圖所示：如果我需要在文件夾 A 里的某文件，訪問文件夾 B 里的某服務，而文件夾 A 和 B 分別是兩個不同 module 的實現，我需要在文件夾 A 的文件里，通過導入文件夾 B 里定義的 index 文件，來導入其暴露的服務，下面的例子里導入的是 BrowserService.

Jerryindex.ts 文件的內容：

如果 browser 文件下定義的是符合 Angular 命名規范的 index.ts 文件，則文件夾A里的導入語句，可以不顯式包含 index.ts 這個文件名，簡寫成：

實際上，這些 index.ts 文件，稱為 barrel file，在這個StackOverflow thread里有討論。

桶是一種將多個模塊的導出匯總到單個便利模塊的方法。 桶本身是一個模塊文件，用于重新導出其他模塊的選定導出。

Imagine three modules in a heroes folder:

// heroes/hero.component.ts export class HeroComponent {}// heroes/hero.model.ts export class Hero {}// heroes/hero.service.ts export class HeroService {}

如果沒有桶，消費者將需要三個導入語句：

import { HeroComponent } from '../heroes/hero.component.ts'; import { Hero } from '../heroes/hero.model.ts'; import { HeroService } from '../heroes/hero.service.ts';

我們可以將一個桶添加到導出所有這些項目的 heros 文件夾（按慣例稱為索引）：

export * from './hero.model.ts'; // re-export all of its exports export * from './hero.service.ts'; // re-export all of its exports export { HeroComponent } from './hero.component.ts'; // re-export the named thing

現在消費者可以從桶中進口它需要的東西。

import { Hero, HeroService } from '../heroes'; // index is implied

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的关于 Angular 项目里的 index.ts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。