角2打字稿進口深目錄

Question

如果我有文件的結構是這樣的：

• 應用
  • 車型
    • model1.ts
    • model2.ts
    • model3。 ts
    • index.ts
    個
  • 服務
    • serviceGroup1
    • serviceGroup1Service1.ts
    • serviceGroup1Service2.ts
    • index.ts
    • serviceGroup2
    • serviceGroup3
    • index.ts

tsconfig.json：

"compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "mapRoot": "/", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "noEmitOnError": true, 
    "noImplicitAny": false, 
    "outDir": "../dist/", 
    "rootDir": ".", 
    "sourceMap": true, 
    "target": "es5", 
    "inlineSources": true 
} 

如何使所有的模型公開，並將其導入這樣的： serviceGroup1Service1.ts：

import * as models from 'models'; 

更新文件樹

頁更新的文件

增加了新的barells到system.config.ts

'app', 
'app/models', 
'app/services' 

試圖在serviceGroup1Service1.ts使用

import * from 'app/models' 

有一個錯誤「無法找到模塊「應用程序/模型'

但是

import { Component } from '@angular/core' 

效果很好。如何爲我的組件做到這一點？

Answer 1

添加app/models.ts：

export * from './models/model1` 
export * from './models/model2` 
export * from './models/model3` 

，現在你可以導入它們：

import * as models from 'app/models'; 

如果你想使用的只是models代替app/models你應該添加SystemJS地圖配置，是這樣的：

System.config.map = { models: 'app/models' } 

Answer 2

以前的答案是有效的，但我注意到angular2模式似乎是「barrels」，你將在模型目錄中有一個index.ts，爲每個文件執行「從xxx導出*」，然後你將「import * from ./models/「。兩種方法都有效，只是我注意到的模式。

可能有一些內置的支持來生成它們（也許在angular-cli中？它在我用它創建組件時生成它們），我只需要一對夫婦並手動生成它們。