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

Question

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

angulartypescriptdirectory-structuredatamodelangular2-modules

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
   [...]

我最初的想法是将instruction.model.ts包含在shared.module中，并将其导出到导入shared.module的每个模块中。但这似乎行不通，因为该模型不是指令、管道或模块。是否有一种方法可以导出它？

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

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

- A. Ziegler

2个回答

3

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

         ...

        }
    }

- Sam5487

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- A. Ziegler · Accepted Answer

一个月后，我感觉自己有信心回答这个问题并分享我用来解决上述一些问题的方法。其中大部分问题源于我对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中导入和导出的误解。所有关于模块和导出它的东西在这里都不重要，对于完全不同的问题很重要。其他一切现在应该都已经得到了回答。