所有的 index.ts 有什么用？

32 浏览
0 Comments

所有的 index.ts 有什么用？

我一直在看一些种子项目，所有组件似乎都有一个索引.ts，导出该组件的*。 我找不到它实际上用于什么的地方？

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

谢谢

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

index.ts类似于nodejs中的index.js或网站的index.html。

因此，当您说import {} from 'directory_name'时，它将查找指定目录中的index.ts并导入其中导出的内容。

例如，如果您有calculator/index.ts，如下所示：

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

您可以执行以下操作：

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

0
0 Comments

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

我们可以将桶添加到英雄文件夹中(按惯例称为索引)，导出所有这些项目：

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作用域包每个都有一个名为索引的桶。

另请参见：例外情况：无法解决所有参数

* 注意： Barrel已从更高版本的Angular词汇表中移除。

更新
使用最新版本的Angular，桶文件应按如下编辑：

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

0