Angular-模块分离-共享或通用代码的最佳实践

问题描述：

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

I have some Angular services that have identical methods for parsing the json response, handling errors etc (eg. trapping if it's a 422 error for example).

很显然，我不想将这些方法复制并粘贴到每个服务中，但是我似乎找不到任何有关将这些代码放在何处的指南.

Obviously I don't want these methods copy and pasted into each service, but I cannot seem to find any guidance on where I should put this code.

它们不是类方法，只是每个服务中当前相同的私有方法.

They are not class methods, just currently identical private methods in each service.

这里是一个例子:

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

是否可以使用某种方法来创建帮助程序模块或可以包含的类似Rails Concern的东西?

Is there some way to create a helper module or something like a Rails Concern that you can include?

例如，我有这个文件夹:

Say for example I have this folder:

应用/服务

其中包含我的各种.ts服务文件.

which has my various .ts service files.

我可以创建"app/services/helpers"文件夹，然后在其中放置文件...但是，.ts文件中包含什么内容?

I could create "app/services/helpers" folder and put a file inside that...but what goes into that .ts file?

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

eg. parser-helper.ts could be the file name, but what does the code inside that look like? Should it be a module? If so, how can I include it into the service?

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

For example, is this the recommended way to do it?

app/services/helpers/parser-helper.module.ts

module parserHelperModule {

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

}

答

您可以将通用代码作为通用服务本身使用，如下所示

You can have the common code as a common service itself as below

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(){

   }
}

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

So you can import the class anywhere accross the application and use them

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

Note: When you are defining common methods in to a single service, make sure they are public

更新1 :

是的，最好使用一个单独的模块来提供所有通用代码，并使主AppModule导入如下所示的 CommonModule .

Yes it is a good practice to use a separate module that serves all the common codes and making the main AppModule to import the CommonModule which would look like.

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

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

Make sure that your common module just serves as a collection, this CommonModule should not contain

浏览器模块
自举组件

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

You might be look for a the below image to have separation of concerns

Angular-模块分离-共享或通用代码的最佳实践

相关推荐