在 Angular 8 中跨多个组件重用方法的最佳实践答案

【问题标题】：Best practices for reusing methods across multiple components in Angular 8在 Angular 8 中跨多个组件重用方法的最佳实践
【发布时间】：2020-03-12 00:04:11
【问题描述】：

假设我有一个方法可以返回两个数字的百分比：

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

目前，我在组件控制器上有这个方法。如何使其可跨多个组件重用？最佳做法是什么？

我正在考虑将其用作服务：在 Angular 中这样做是否正确？

【问题讨论】：

标签： angular code-reuse

【解决方案1】：

如果这些方法是幂等的并且也不依赖于任何状态，那么我将只有一个单独的 .ts 文件，您可以从中导入函数。

myfunctions.ts

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

component.ts

import {calculatePercentage} from './myfunctions';

export class MyComponent {

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

【讨论】：

谢谢大家！

【解决方案2】：

因此可以通过两种方式完成，您可以在服务内部实现该功能或创建实用方法。

我们应该为直接影响我们组件的方法创建服务，例如 HTTP 请求等。

至于上述方法，我会创建一个 util 文件并从中导出方法。

我希望这能解决你的问题。

对于此类问题，请使用不同的平台以获得建议，而不是使用旨在解决您的编程问题的 StackOverflow。

【讨论】：

【解决方案3】：

您有多种选择：

在服务中作为方法。
在文件 Utils 中，export function calculatePercentage(...){...} 作为静态函数。
在类中作为静态方法（就是less recommanded）

没有“最佳”方式。每种方法都有它的高手

【讨论】：