Angular2 - 模塊分離 - 最佳實踐

我有一些Angular 2服務具有相同的方法來解析json響應，處理錯誤等（例如，如果它是422錯誤陷阱例如）。Angular2 - 模塊分離 - 最佳實踐

很顯然，我不希望這些方法複製並粘貼到每個服務中，但我似乎無法找到有關我應該在哪裏放置此代碼的任何指導。

他們不是類方法，只是目前在每個服務中相同的私有方法。

這裏有一個例子：

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

是否有某種方式來創建一個輔助模塊或像一個Rails值得關注的是，你可以包括些什麼呢？

例如說我有這個文件夾：

應用程序/服務

其中有我的各種.TS服務文件。

我可以創建「應用程序/服務/助手」文件夾，並把文件放在裏面...但是那個.ts文件會怎麼樣？

例如。 parser-helper.ts可以是文件名，但是裏面的代碼是什麼樣的？它應該是一個模塊嗎？如果是這樣，我怎樣才能將其納入服務？

例如，這是推薦的方式嗎？

應用程序/服務/助理/解析器helper.module.ts

module parserHelperModule { 

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

}

來源

2017-02-19 rmcsharry

那麼TypeScript有函數，類，方法等。你可以自由地創建一個函數，從模塊中導出它，然後導入它並在任何你想要的地方使用它。 –

我添加了一些示例代碼，我認爲您的意思是我嘗試。 – rmcsharry

您可以將通用代碼作爲以下公共服務本身使用

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不應含有

瀏覽器模塊
自舉組件

你可能會尋找一個對下方圖像有分離關注點

來源

2017-02-19 14:53:25 Aravind

謝謝，但由於某種原因，它創造了一個奇怪的或矯枉過正的服務。或者至少有點誤導，因爲'CommonService'本身並不是一項真正的服務，而只是一些輔助代碼。 – rmcsharry

如果你不希望它是服務服務它沒有@Injectable（），它仍然是一個簡單的類 – Aravind

啊我明白了。而且你的更新可能更多我在想（來自Rails背景），所以謝謝，我從你的答案中學到了很多東西。 – rmcsharry

在解析器helper.ts：

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

在任何其它文件打字稿：

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

... 
const s = parseToString(response);

來源

2017-02-19 14:52:16

這很有趣 - 根本不涉及任何模塊。這是在Angular2應用程序中分享通用代碼的推薦方式嗎？ – rmcsharry

涉及兩個模塊。如[文檔]（https://www.typescriptlang.org/docs/handbook/modules.html）中所述，*在TypeScript中，與ECMAScript 2015中一樣，包含頂級導入或導出的任何文件都被視爲模塊。* –

真棒，感謝您的鏈接和斜體。我希望我現在可以將兩個答案標記爲正確！ – rmcsharry

Angular2 - 模塊分離 - 最佳實踐

回答

相關問題