在 Angular 8 中跨多個組件重用方法的最佳實踐

Question

假設我有一個從兩個數字返回百分比的方法：

  calculatePercentage(a, b) {
      return (((a - b) / b) * 100 * 2).toFixed(2);
  }

目前，我在組件 controller 上有這種方法。 如何使其可跨多個組件重用？ 最佳做法是什么？

我正在考慮將其用作服務：在 Angular 中這樣做是否正確？

Answer 1

如果這些方法是冪等的並且也不依賴於任何 state 那么我將只有一個單獨的.ts 文件，您可以從中導入函數。

我的函數.ts

export calculatePercentage = (a:number,b:number):string => {return (((a - b) / b) * 100 * 2).toFixed(2);}

組件.ts

import {calculatePercentage} from './myfunctions';

export class MyComponent {

  someMethod() {
      this.result = calculatePercentage(this.numa, this.numb);
  }
}

Answer 2

所以它可以通過兩種方式完成，您可以在服務內部實現 function 或創建實用程序方法。

我們應該為直接影響我們組件的方法創建服務，例如 HTTP 請求等。

至於上述方法，我會創建一個 util 文件並從中導出方法。

我希望這能解決你的問題。

對於此類問題，請使用不同的平台來獲得建議，而不是使用旨在解決您的編程問題的 StackOverflow。

Answer 3

您有多種選擇：

• 在作為方法的服務中。

• 在文件Utils中export function calculatePercentage(...){...}作為 static function。

• 在 class 作為 static 方法（這是較少推薦）

沒有“最佳”方式。 每種方法都有其高手