Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 2为多个模块定义数据模型_Angular_Typescript_Directory Structure_Datamodel_Angular2 Modules - Fatal编程技术网

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

Angular 2为多个模块定义数据模型,angular,typescript,directory-structure,datamodel,angular2-modules,Angular,Typescript,Directory Structure,Datamodel,Angular2 Modules,我目前正在使用Angular 2.0(发行版)启动一个新项目,我想定义一些全局数据模型/模式。据我所知,Angular 2没有处理以下纯数据类的默认方法: export class TestModel { id: number; name: string; randomAttribute: number; author: string; } 因此,关于最佳实践,我的第一个问题是:在使用Angular 2时,我应该定义这样的类吗? // // ===== File heroes

我目前正在使用Angular 2.0(发行版)启动一个新项目,我想定义一些全局数据模型/模式。据我所知,Angular 2没有处理以下纯数据类的默认方法:

export class TestModel {
  id: number;
  name: string;
  randomAttribute: number;
  author: string;
}
因此,关于最佳实践,我的第一个问题是:在使用Angular 2时,我应该定义这样的类吗?

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

         ...

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

这些数据类有时需要在多个模块中使用(),因此我的第二个问题是我应该将它们放在我的应用程序中的什么位置?目前我有以下结构:

/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
   [...]
我的第一个想法是将
指令.model.ts
包含在
共享.module
中,并在导入
共享.module
的每个模块中导出它。这似乎不起作用,因为模型不是指令、管道或模块是否有办法将其导出?

更简单的解决方案是直接导入
test.model.ts
文件以及需要它的每个模块中的每个其他共享模型。但这看起来很笨重,不适合多种型号


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

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

示例:

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

         ...

        }
    }

因此,一个月后,我有信心自己回答这个问题,并分享我用来解决上述一些问题的方法。其中大多数都是因为我对输入和输出的理解有误,比如我对Typescript和Angular2的理解,或者仅仅是设计决策

TL;DR:是的,模型类可能会有所帮助。放置位置取决于您的应用程序和您的偏好,但需要帮助。这个问题的其他一切都无关紧要

因此,关于最佳实践,我的第一个问题是:在使用Angular 2时,我应该定义这样的类吗?

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

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

正如@Sam5487在他的回答中指出的,这些类只是变量或对象,就像JavaScript中的几乎所有东西一样。因此,要导入它们,您需要使它们全局可访问,只需使用“../../../modelfolder”
中的
import{SomeDumbModel}将它们导入应用程序中的某个位置。当然,这在应用程序中的任何位置都有效,但这种相对路径可能会变得非常长和笨拙。所以真正的问题应该是:我可以使用绝对路径进行导入吗?。答案是肯定的,至少有,网页和。我不知道SystemJS或其他设置的解决方案。我的应用程序根目录下有一个
/models
文件夹,在任何地方导入时都可以引用我的
@models/

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


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

您可以使用
tsconfig.json
“路径”来避免使用绝对路径,并将所有问题缩短一个等级:设置之后,我个人会将它们保存在
/src/app/core/models
中,这将转换为
@core/models
或仅仅是
@models
,这取决于你想要的长度。是的,这也是我最终的策略。在我可以使用absolut路径进行导入之后,我链接了相关的github问题,但感谢您也添加了堆栈溢出链接。哦,对不起,我没有单击这两个链接,因为我认为它们会导致angular cli和typescript网站。。没有费心在他们身上盘旋:D我的错。干杯