Angular 4 简单的文件夹结构更改架构

Question

问题是如何在 Angular 4 项目中组织文件和文件夹以便能够轻松移动它们。 现在我正在尝试这样。

├───core
│   │   core.module.ts
│   │   index.ts
│   │
│   ├───models
│   │   │   index.ts
│   │   │
│   │   ├───api
│   │   │       api-response-list.interface.ts
│   │   │       api-response.interface.ts
│   │   │       index.ts
│   │   │       page-search-params.interface.ts
│   │   │
│   │   └───auth
│   │           auth-token.interface.ts
│   │           index.ts
│   │           token-type.type.ts
│   │
│   └───services
│           api.service.ts
│           auth-token.service.ts
│           auth.service.ts
│           crud.service.ts
│           index.ts
│           local-storage.service.ts
│

我在每个导出的逻辑文件夹容器中都有 index.ts 文件 如果我决定搬家 服务/api.service.ts 到 services/api-service/api.serivce.ts 文件夹 我将只更改 index.ts 中的引用，使用此服务的其他部分不会更改。

//core/models/api/index.ts
    export { APIResponse } from './api-response.interface';
    export { APIResponseList } from './api-response-list.interface';
    export { PageSearchParams } from './page-search-params.interface';

--

//core/models/auth/index.ts
    export { AuthToken } from './auth-token.interface';
    export { TokenType } from './token-type.type';

--

//core/models/index.ts
    export { AuthToken, TokenType } from './auth';
    export { APIResponseList, APIResponse, PageSearchParams } from './api';

--

//core/index.ts
    export { ApiService, CRUDService } from './services';
    export { CoreModule } from './core.module';
    export { AuthToken, TokenType, APIResponseList, APIResponse, PageSearchParams } from './models';

这里我不能使用export *，因为有角度编译器。 那么我需要在哪里重新出口这些东西？

主要思想是在将某些东西迁移到某个地方时是安全的，在这个例子中，我使用的是打字稿桶，但也许有更好的方法？ 有什么想法吗？

Answer 1

我会建议您使用这两种方法中的一种（或同时使用两种方法），具体取决于您的实际需求。

使用索引导出模式，这意味着您为每个文件夹创建一个索引文件，导出该范围内的文件，从最深的级别开始向上，因此在某些时候您可以最终引用模型文件夹并拥有所有来自那里的实体，因此在一行中，您可以这样做：

import { AuthToken, TokenType.... } from './models/index'; // you don't necessary need to point to index but to the folder.

通过打字稿映射路径，因此您可以获得绝对路径，当您移动结构或重命名文件夹时，只需一个地方即可修改。要采用这种方法，我建议您访问此链接：

How to use paths in tsconfig.json

以及此处的文档链接：

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

您可以将这两种方法结合在一起。

希望对你有帮助