javascript - Angular 域模型

Question

目前我正在开发通过 Angular CLI 生成的 Angular 应用程序，它使用的是 webpack。

我们有 50 多个模型 typescript 类来保存数据，例如 employee.model.ts 、 person.model.ts 等。

目前在我们的项目中，它分散在不同的模块中。我们决定将所有模型放入一个 Angular 模块中，然后所有其他模块都应该从一个特定模块导入这些领域模型。

我如何实现这一点？

我已经阅读了几篇关于 typescript 别名功能的文章，其中我可以在 tsconfig.json 文件中添加路径属性。到目前为止，这是我尝试过的方法。

ProjectDirectory/src/app

ProjectDirectory/src/app/models

模型文件夹包含 employee.model.ts 、 person.model.ts 和 50 多个其他模型。

tsconfig.js

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "baseUrl": "src",
    "paths": {
      "@my-models/*": ["models/*"]
    }
  }
}

我在其他组件上尝试过的导入语句。

import { Employee } from '@my-models'; //<== DOESN'T WORK & THROWS ERROR.

错误

src/app/app.module.ts (20,26): Cannot find module '@my-models'.

是否有任何干净的方法可以将所有模型组织在一个地方并且具有没有相对路径的更清晰的导入语句，例如

import {Xyz} from './././././abc.module';

提前感谢大家花时间阅读问题。

注意:我阅读了以下文章，但没有用。

https://decembersoft.com/posts/say-goodbye-to-relative-paths-in-typescript-imports/

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

Answer 1

处理此问题的推荐方法是使用 barrel .

在您的 models 文件夹中，您可以添加一个 index.ts 文件，该文件导出该文件夹中包含的所有类:

export * from './abc.module.ts';   // re-export all of its exports
export * from './xyz.module.ts'; // re-export all of its exports
...

现在需要从桶中导入:

import { Abc, Xyz } from './path-to-models';