Angular 2 为多个模块定义数据模型

Posted 2023-02-14

【中文标题】Angular 2 为多个模块定义数据模型

【英文标题】：Angular 2 define data models for multiple modules

【发布时间】：2017-02-20 05:48:46

【问题描述】：

我目前正在使用 Angular 2.0（发行版）开始一个新项目，我想定义一些全局数据模型/模式。据我了解，Angular 2 没有像这样处理纯数据类的默认方法：

export class TestModel 
  id: number;
  name: string;
  randomAttribute: number;
  author: string;

所以我关于最佳实践的第一个问题是：在使用 Angular 2 时我应该定义这样的类吗？

对于我整个应用程序的设计和概念，我认为它们是必要的，但我不确定我是否在这里应用了错误的思维方式。

这个数据类有时需要在多个模块中（ngModule）所以我的第二个问题是我应该把它们放在我的应用程序的什么地方？目前我有以下结构：

/app
   /shared
      shared.module.ts
      test.model.ts
   /module1
      module1.module.ts
      foo.component.ts
      [...]
   /module2
      module2.module.ts
      bar.component.ts
      [...]
   app.module.ts
   [...]

我的第一个想法是将instruction.model.ts 包含在shared.module 中，并将其导出到每个导入shared.module 的模块中。这似乎不起作用，因为模型不是指令、管道或模块。 有没有办法导出它？

更简单的解决方案是直接导入test.model.ts 文件以及每个需要它的模块中的所有其他共享模型。但这对于多个模型来说似乎很笨重且不方便。

我想到的第三种可能的解决方案是将所有共享数据模型放在一个单独的文件夹中，将它们的导出捆绑在一个文件中，如下所示，然后将该文件导入每个需要它的模块中。

【参考方案1】：

如果您不想使用Service，我会将您的全局变量放在一个文件中，然后将它们导出。

示例：

//
// ===== File myGlobals.ts    
//
'use strict';

export var seperator='/';
export var add='+';
export var subtract='-';

//... whatever else you need

要使用全局变量，只需将它们导入您要使用它们的每个文件中：import globalVars = require('./myGlobals');

A2 的英雄示例：

// 
// ===== File heroes.component.ts    
//
import Component, OnInit from 'angular2/core';
import Router from 'angular2/router';
import HeroService from './hero.service';
import HeroDetailComponent from './hero-detail.component';
import Hero from './hero';
import globalVars = require('./myGlobals');

export class HeroesComponent implements OnInit 
    public heroes: Hero[];
    public selectedHero: Hero;
    // 
    //
    // Here we access the global var reference.
    //  
    public helloWorld: string="hello " + globalVars.seperator + " there";

         ...

        
    

【参考方案2】：

所以，一个月后，我有信心自己回答这个问题，并分享我用来解决上述一些问题的方法。其中大部分源于我对 Typescript 和 Angular2 中的导入和导出的误解，或者仅仅是设计决策。

TL;DR：是的，模型类会很有帮助。将它们放置在哪里取决于您的应用程序和您的偏好，但absolute paths for imports 帮助。问题中的其他所有内容都无关紧要。

所以我关于最佳实践的第一个问题是：在使用 Angular 2 时我应该定义这样的类吗？

在采用 Angular2 之前，我没有使用过 AngularJS 或任何 javascript 框架，但习惯了 Laravel 等 php 框架的经典 MVC 模式。所以这就是这个问题的来源。 我的答案是是的，你应该。类型是 Typescript 的一大优势，定义数据模型类或类型有助于保持应用程序的一致性，在我的 IDE 中提供自动完成功能，并且 typescript 编译器可以在我搞砸时通知我。此外，这些类在后端强制与我的关系数据库保持一致。这些模型类仍然是可选的，是否使用它们是设计决定，甚至可以视为个人意见。

我的第二个问题是我应该将它们放在我的应用中的什么位置？

就像@Sam5487 在他的回答中指出的那样，这些类只是变量或对象，就像 JavaScript 中的几乎所有东西一样。因此，要导入它们，您需要使它们在全球范围内可访问，只需使用import SomeDumbModel from '../../../modelfolder' 将它们导入应用程序的某个位置。当然，这适用于应用程序中的任何位置，但是这种相对路径可能会变得非常长且笨重。所以真正的问题应该是：我可以使用绝对路径进行导入吗？。答案是是的，至少对于angular-cli、webpack 和typescript。我不知道 SystemJS 或其他设置的解决方案。我在我的应用程序的根目录中使用了一个/models 文件夹，在任何地方导入时都可以引用我的@models/。

我的第一个想法是在 shared.module 中包含 instruction.model.ts 并将其导出到每个导入 shared.module 的模块中。这似乎不起作用，因为模型不是指令、管道或模块。 有没有办法导出它？

剩下的问题只是基于我对 Typescript 和 Angular2 中的导入和导出的误解。所有关于模块和导出它的东西在这里都无关紧要，对于完全不同的问题很重要。现在应该回答其他所有问题。

【讨论】：

您可以使用tsconfig.json "paths" 来避免使用绝对路径并将所有内容缩短一个档次：***.com/a/41460972/413785 设置好之后，我会亲自将它们保存在./src/app/core/models这将转换为@core/models 或只是@models，具体取决于您想要多短。

是的，这也是我最终采用的策略。我在 我可以使用绝对路径进行导入 之后链接了相关的 github 问题，但感谢您还添加了堆栈溢出链接。

哦，对不起，我没有点击这两个链接，因为我认为它们会导致 angular-cli 和 typescript 网站.. 没有费心将鼠标悬停在它们上面：D 我的错。干杯！