Angular - 模块分离 - 共享或公共代码的最佳实践
Angular - Module Separation - Best Practice for shared or common code
我有一些 Angular 服务具有相同的方法来解析 json 响应、处理错误等(例如,如果是 422 错误则捕获)。
显然我不希望将这些方法复制并粘贴到每个服务中,但我似乎找不到任何关于我应该将此代码放在哪里的指导。
它们不是 class 方法,只是当前每个服务中相同的私有方法。
举个例子:
private parseToString(jsonResponse: any){
return Object.keys(jsonResponse).reduce(
(prev, next) => prev.concat(jsonResponse[next].map(
v => next + ' ' + v).join(', ')), []).join(', ');
}
是否有一些方法可以创建辅助模块或诸如 Rails 您可以包含的关注点之类的东西?
例如我有这个文件夹:
app/services
其中有我的各种 .ts 服务文件。
我可以创建 "app/services/helpers" 文件夹并在其中放入一个文件...但是那个 .ts 文件中包含什么?
例如。 parser-helper.ts 可能是文件名,但是里面的代码是什么样的?它应该是一个模块吗?如果是这样,我如何将其包含到服务中?
例如,这是推荐的方法吗?
app/services/helpers/parser-helper.module.ts
module parserHelperModule {
export function helperA(){}
export function helperB(){}
}
在parser-helper.ts:
export function parseToString(jsonResponse: any): string {
...
}
在任何其他 TypeScript 文件中:
import { parseToString } from './relative/path/to/parser-helper';
...
const s = parseToString(response);
您可以将公共代码作为公共服务本身,如下所示
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(){
}
}
因此您可以在应用程序的任何地方导入 class 并使用它们
注意:当您在单个服务中定义通用方法时,请确保它们是 public
更新 1:
是的,使用一个单独的模块来提供所有公共代码并使主 AppModule 导入 CommonModule 是一个很好的做法。
@NgModule({
imports: [
HttpModule, Logger, Toaster, ...
],
declarations: [ CommonCmoponents
],
providers:[Service1, Service2 ]
})
export class CommonModule { }
确保你的公共模块只是一个集合,这个CommonModule不应该包含
- 浏览器模块
- 引导组件
您可能会寻找下图来分离关注点
我有一些 Angular 服务具有相同的方法来解析 json 响应、处理错误等(例如,如果是 422 错误则捕获)。
显然我不希望将这些方法复制并粘贴到每个服务中,但我似乎找不到任何关于我应该将此代码放在哪里的指导。
它们不是 class 方法,只是当前每个服务中相同的私有方法。
举个例子:
private parseToString(jsonResponse: any){
return Object.keys(jsonResponse).reduce(
(prev, next) => prev.concat(jsonResponse[next].map(
v => next + ' ' + v).join(', ')), []).join(', ');
}
是否有一些方法可以创建辅助模块或诸如 Rails 您可以包含的关注点之类的东西?
例如我有这个文件夹:
app/services
其中有我的各种 .ts 服务文件。
我可以创建 "app/services/helpers" 文件夹并在其中放入一个文件...但是那个 .ts 文件中包含什么?
例如。 parser-helper.ts 可能是文件名,但是里面的代码是什么样的?它应该是一个模块吗?如果是这样,我如何将其包含到服务中?
例如,这是推荐的方法吗?
app/services/helpers/parser-helper.module.ts
module parserHelperModule {
export function helperA(){}
export function helperB(){}
}
在parser-helper.ts:
export function parseToString(jsonResponse: any): string {
...
}
在任何其他 TypeScript 文件中:
import { parseToString } from './relative/path/to/parser-helper';
...
const s = parseToString(response);
您可以将公共代码作为公共服务本身,如下所示
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(){
}
}
因此您可以在应用程序的任何地方导入 class 并使用它们
注意:当您在单个服务中定义通用方法时,请确保它们是 public
更新 1:
是的,使用一个单独的模块来提供所有公共代码并使主 AppModule 导入 CommonModule 是一个很好的做法。
@NgModule({
imports: [
HttpModule, Logger, Toaster, ...
],
declarations: [ CommonCmoponents
],
providers:[Service1, Service2 ]
})
export class CommonModule { }
确保你的公共模块只是一个集合,这个CommonModule不应该包含
- 浏览器模块
- 引导组件
您可能会寻找下图来分离关注点