角度 - 模块分离 - 共享或公共代码的最佳实践

时间:2017-02-19 14:43:51

标签: angular typescript separation-of-concerns angular-module

我有一些Angular服务,它们具有相同的方法来解析json响应,处理错误等(例如,如果它是422错误,则捕获)。

显然我不希望这些方法被复制并粘贴到每个服务中,但我似乎无法找到关于我应该放置此代码的任何指导。

它们不是类方法,只是目前每个服务中相同的私有方法。

以下是一个例子:

   private parseToString(jsonResponse: any){
    return Object.keys(jsonResponse).reduce(
      (prev, next) => prev.concat(jsonResponse[next].map(
        v => next + ' ' + v).join(', ')), []).join(', ');
  }  

是否有某种方法可以创建一个辅助模块或类似Rails Concern的东西?

比如说我有这个文件夹:

应用程序/服务

有我的各种.ts服务文件。

我可以创建“app / services / helpers”文件夹并在其中放入一个文件......但是那个.ts文件是什么?

例如。 parser-helper.ts可以是文件名,但是里面的代码是什么样的?它应该是一个模块吗?如果是这样,我该如何将其包含在服务中?

例如,这是推荐的方法吗?

应用程序/服务/助手/解析器-helper.module.ts

module parserHelperModule {

  export function helperA(){}
  export function helperB(){}

}

2 个答案:

答案 0 :(得分:4)

在parser-helper.ts中:

export function parseToString(jsonResponse: any): string {
    ...
}

在任何其他TypeScript文件中:

import { parseToString } from './relative/path/to/parser-helper';

...
const s = parseToString(response);

答案 1 :(得分:2)

您可以将公共代码作为公共服务本身,如下所示

export class CommonService {
    public parseToString(jsonResponse: any){
            return Object.keys(jsonResponse).reduce(
                        (prev, next) => prev.concat(jsonResponse[next].map(
                            v => next + ' ' + v).join(', ')), []).join(', ');
  }  
   public someOtherMethod(){

   }
}

因此,您可以在应用程序的任何位置导入该类并使用它们

注意:当您在单个服务中定义常用方法时,请确保它们是公共的

更新1

是的,最好使用一个单独的模块来提供所有常用代码,并使主AppModule导入 CommonModule ,这看起来像。

@NgModule({
  imports:    [ 
                HttpModule, Logger, Toaster, ... 
              ],
  declarations: [ CommonCmoponents
                ],
  providers:[Service1, Service2 ]
})
export class CommonModule { }

确保您的公共模块仅用作集合,此CommonModule不应包含

  1. 浏览器模块
  2. 引导组件
  3. 您可能会寻找下面的图片来分离关注点

    enter image description here