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

问题描述 投票:2回答:2

我有一些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(){}

}
angular typescript separation-of-concerns angular-module
2个回答
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. 引导组件

您可能正在寻找下面的图像以分离关注点

enter image description here


4
投票

在parser-helper.ts中:

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

在任何其他TypeScript文件中:

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

...
const s = parseToString(response);
© www.soinside.com 2019 - 2024. All rights reserved.