关于 Angular 项目里的 index.ts

如下图所示：如果我需要在文件夹 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相关推荐

Angular 项目里 angular.json 文件内容的学习笔记
看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子: version: The configuration-file version. newProj ...
如何在Angular项目里创建新的Service
右键选择app文件夹,选择Angular Generator->Service: 取名为cart. 生成的cart.service.ts默认如下图: 定义一个类型为数组的属性items,用于存放 ...
Angular 项目里的 tsconfig.json
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html The presence of a tsconfig.json file ...
Angular 项目里和 sourceMap 相关的设置
生产环境里,sourceMap 为 false:source source-map 和 source-map-loader 是专门的包: tsconfig.json 里,sourceMap 为 tru ...
angular项目(TS)引入腾讯地图报找不到qq
文章目录在angular项目中引入腾讯地图问题解决结尾在angular项目中引入腾讯地图在index.html文件中script标签加载API服务 <script charset=&q ...
angular项目整合到.net mvc中
Webpack配置第一步必然是要先得到前端项目的打包资源,由强大的webpack来完成,目标是将angular的所有依赖以及应用主代码分别打包到polyfill.js.vendor.js.main. ...
Angular项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...
thinkphp url去掉index.php,thinkphp 去掉URL 里面的index.php（?s=）
例如你的原路径是 http://localhost/test/index.php/home/goods/index.html 那么现在的地址是 http://localhost/test/home/g ...
关于 Angular 项目类型为 library 的工程使用 tsconfig.json 的问题
我今天做 Angular 开发时,遇到一个很奇怪的问题: 在某个 Angular library 项目里,无法正确解析出 @Spartacus/core, 错误消息: Cannot find modu ...

关于 Angular 项目里的 index.ts

关于 Angular 项目里的 index.ts相关推荐

最新文章

热门文章