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

Question

我目前正在使用 Angular 2.0（发行版）开始一个新项目，我想定义一些全局数据 models/schemas。据我了解，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 文件和每个需要它的模块中的所有其他共享模型。但这对于多个模型来说似乎很笨重且不方便。

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

Answer 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";

         ...

        }
    }

Answer 2

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

TL;DR：是的，模型类会有所帮助。放置它们的位置取决于您的应用程序和您的偏好，但 absolute paths for imports 有帮助。问题中的其他一切都不重要。

So my first question regarding best practices is: Should I define such classes when working with Angular 2?

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

my second question is Where do I place them in my app?

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

My first thought was to include the instruction.model.ts in the shared.module and export it in every module that imports shared.module. That doesn't seem to work because the model is not a directive, pipe or module. Is there a way to export it anyway?

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

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

Angular 2 define data models for multiple modules

directory-structure

datamodel

typescript

angular2-modules

angular