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 文件如果我决定搬家 services/api.service.ts 到 services/api-服务/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 * 因为angular 编译器。所以到处都需要重新出口东西？

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

Answer 1

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

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

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

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

和 link 到这里的文档：

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

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

希望对您有所帮助

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

Angular 4 easy folder structure change architecture

architecture

directory-structure

typescript

angular