16

我目前正在使用 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
   [...]

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

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

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

4

2 回答 2

27

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

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

所以我关于最佳实践的第一个问题是：我应该在使用 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 中的导入和导出的误解。所有关于模块和导出它的东西在这里都无关紧要，对于完全不同的问题很重要。现在应该回答其他所有问题。

于 2016-11-15T11:45:19.617 回答
3

如果您不想使用 a 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";

         ...

        }
    }
于 2016-10-11T16:11:47.130 回答