1. ホーム
  2. angular

[解決済み] index.tsは何に使われているのですか?

2022-04-23 19:49:55

質問

いくつかのシードプロジェクトを見てきましたが、すべてのコンポーネントには、そのコンポーネントから*をエクスポートするindex.tsがあるようです。私はそれが実際に何のために使用されているのかどこにも見つけることができません?

https://github.com/mgechev/angular2-seed/tree/master/src/client/app/%2Bhome

ありがとうございます。

解決方法は?

からの Angular.io v2 のアーカイブ用語集 の項目は Barrel * :

バレルとは、複数のモジュールのエクスポートを1つにまとめる方法です。 便利なモジュールです。バレル自体はモジュールファイルであり、そのファイルは 他のモジュールのエクスポートを選択する。

heroesフォルダに3つのモジュールが入っていると想像してください。

// heroes/hero.component.ts
export class HeroComponent {}

// heroes/hero.model.ts
export class Hero {}

// heroes/hero.service.ts
export class HeroService {}

バレルがなければ、消費者は3つのimport文が必要になります。

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

heroesフォルダ(慣習的にindexと呼ばれる)に樽を追加することができます。 これらのアイテムをすべてエクスポートします。

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

Angularのスコープ付きパッケージは、それぞれindexという名前のバレルを持っています。

参照 EXCEPTION: すべてのパラメータを解決できません。


* NOTE Barrel から削除されました。 より新しいバージョンのAngular用語集 .

アップデイト Angularの最新バージョンでは、バレルファイルを以下のように編集する必要があります。

<ブロッククオート
export { HeroModel } from './hero.model';  
export { HeroService } from './hero.service'; 
export { HeroComponent } from './hero.component';