如何从Angular2 TypeScript的模块文件夹中加载多个类？

Question

我有以下的模块结构的Angular2应用：

/app 
    /content 
     /models 
      resource.ts 
      container.ts 
      entity-type.ts 
      index.ts 

     /services 
      /whatever 
       whatever.service.ts 

我的模型index.ts样子：

export * from './resource'; 
export * from './container'; 
export * from './entity-type'; 

我希望能够给所有的模型加载到whatever.service.ts。

import {Resource, Container} from '../../models'; 

加载的我system-config.js文件部分的桶的样子：不过

const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 

    // Thirdparty barrels. 
    'rxjs', 

    // App specific barrels. 
    'app', 
    'app/shared', 
    'app/content', 
    /** @cli-barrel */ 
]; 

打字稿编译本没有错误，在浏览器中，我得到从系统加载器和区以下错误说某些文件无法找到。

GET http://localhost:4200/app/content/models.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM59771:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/app/content/models.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30) at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38) at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48) at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34) Error loading http://localhost:4200/app/content/models.js as "../../models" from http://localhost:4200/app/content/services/container/container.service.js ; Zone: ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/app/content/models.js (…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/app/content/models.js (…)

当我直接导入每个模型从它的.ts文件，一切正常。

import { EntityType } from '../../models/entity-type'; 
import { Container } from '../../models/container'; 

如何在不导致Angular2错误的情况下导入模块？

Answer 1

创建一个新的.ts是models文件夹：

新文件all_models.ts：

import * from './entity-type'; 
import * from './container'; 
... 

然后你就可以做到：

import {Resource, Container} from '../../models/all_models'; 

这里唯一的问题是请记住保持all_modules.ts的最新状态，并添加对带有型号的任何新的.ts文件的引用。

Answer 2

从我可以告诉这可能是你想要的东西：

./model/index.ts会是这个样子：

export * from './resource'; 
export * from './container'; 
export * from './entity-type'; 

那么可以说你想从导入您的whatever.service.ts

whatever.service.ts应该是这样的：

import {Resource, Container} from '../models'; 

，因为您在models文件夹中指定了一个索引文件。你应该能够导入文件夹。如上所述。

希望这个更清楚。