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

Angular 2 define data models for multiple modules

提问by A. Ziegler

I'm currently starting a new project with Angular 2.0 (release Version) and I want to define some global data models/schemas. As I understand it, Angular 2 has no default way of handling pure data classes like this:

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

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

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

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

For the design and concept of my whole application I think they are necessary but I'm not sure if I'm applying the wrong way of thinking here.

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

This data classes are sometimes needed in multiple modules (ngModule) so my second question is Where do I place them in my app?Currently I have the following structure:

有时在多个模块 ( 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
   [...]

My first thought was to include the instruction.model.tsin the shared.moduleand 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?

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

The simpler solution would be to just directly import the test.model.tsfile and every other shared model in every module that needs it. But this seems clunky and not convenient for multiple models.

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

The third possible solution I thought of was to put all shared data models in a separate folder, bundle their export in a single file like the one below and import this file in every module that needs it.

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

回答by A. Ziegler

So, a month later I feel confident to answer this question myself and share the methods I used to resolve some of the problems described above. Most of them stemmed from a misunderstanding of the imports and exports in Typescript and Angular2 on my part or where just design decisions.

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

TL;DR: Yes, model classes can be helpful. Where to place them depends on your app and your preference but absolute paths for importshelp. Everything else from the question doesn't really matter.

TL;DR：是的，模型类会有所帮助。放置它们的位置取决于您的应用程序和您的偏好，但导入的绝对路径有帮助。问题中的其他所有内容都无关紧要。

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

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

I didn't work with AngularJS or any JavaScript framework before I adopted Angular2 but was used to the classic MVC pattern of PHP frameworks like Laravel. So this is where this question came from. The answer for me is yes, you should. Types are the big advantage in Typescript and defining data model classes or types helps to keep the app consistent, provides autocompletion in my IDE and the typescript compiler can notify me when I mess up. Furthermore this classes enforce consistency with my relational database in the backend. Still these model classes are optional and whether to use them is a design decision or even could be considered personal opinion.

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

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

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

Like @Sam5487 pointed out in his answer this classes are just variables or objects, like nearly everything in JavaScript. So to import them you need to make them accessible globally and just use import {SomeDumbModel} from '../../../modelfolder'to import them somewhere in your app. Of course this works from any position in the app BUT this relative paths can get very long and clunky. So the real question should have been: Can I use absolute paths for imports?. And the answer is yes, at least with the angular-cli, webpack and typescript. I don't know the solution for SystemJS or other setups. I went with a /modelsfolder at the root of my app which can be referenced my @models/when importing anywhere.

就像@Sam5487 在他的回答中指出的那样，这个类只是变量或对象，就像 JavaScript 中的几乎所有东西一样。因此，要导入它们，您需要让它们在全球范围内可访问，并且只需用于import {SomeDumbModel} from '../../../modelfolder'将它们导入到您的应用程序中的某个位置。当然，这在应用程序的任何位置都有效，但此相对路径可能会变得非常长和笨重。所以真正的问题应该是：我可以使用绝对路径进行导入吗？. 答案是肯定的，至少与角CLI，和的WebPack打字稿。我不知道 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?

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

The Rest of the question is just based on my misunderstanding of imports and exports in Typescript and Angular2. All the stuff about modules and exporting it doesn't matter here and is important for completely different problems. Everything else should be answered by now.

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

回答by Sam5487

If you don't want to use a Service, I would just put your global variables in a file and then export them.

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

Example:

例子：

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

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

//... whatever else you need

And to use the global variables, just import them into each file you want to use them: import globalVars = require('./myGlobals');

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

A2's Hero example:

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

         ...

        }
    }