所有的索引是什么。ts用于？

Question

我一直在看一些种子项目，所有的组件似乎都有索引。ts从该组件导出*。我哪里都找不到它的实际用途？

例如https://github.com/mgechev/angular2-seed/tree/master/src/client/app/+home

谢谢

Answer 1

< code>index.ts帮助我们将所有相关的东西放在一起，我们不需要担心源文件名。

我们可以使用源文件夹名称导入所有内容。

import { getName, getAnyThing } from './util';

这里util是文件夹名，而不是文件名，它具有< code>index.ts，可重新导出所有四个文件。

export * from './util1';
export * from './util2';
export * from './util3';
export * from './util4';

Answer 2

< code>index.ts类似于nodejs中的< code>index.js或者< code>index.html是网站托管。

因此，当您说从“directory_name”导入{}时，它将在指定目录中查找index.ts并导入导出的任何内容。

例如，如果您有计算器/索引

export function add() {...}
export function multiply() {...}

你能做到的

import { add, multiply } from './calculator';

Answer 3

来自 Angular.io v2 存档的 Barrel^* 词汇表条目：

桶是一种将导出从多个模块汇总到单个便利模块中的方法。桶本身是一个模块文件，用于重新导出其他模块的选定导出。

想象一下英雄文件夹中的三个模块：

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

我们可以在英雄文件夹（按约定称为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 的桶。

另请参阅异常：无法解析所有参数

^*注意：Barrel已从Angular词汇表的最新版本中删除。

更新最新版本的Angular，桶文件应编辑如下:

export { HeroModel } from './hero.model';  
export { HeroService } from './hero.service'; 
export { HeroComponent } from './hero.component';