在Angular中的组件模板中工作时使用服务中声明的方法的正确模式

Question

在我的大多数组件中，我使用的是FontAwesome，并按以下说明对其进行声明。

import * as fa from "@fortawesome/free-solid-svg-icons";
...
@Component({ ... })
export class SomeComponent implements OnInit {
  constructor(private service: SirService) { }
  add = fa.faPlus;
  ...
  }
}

在实际模板中，我有这样的内容。

<fa-icon [icon]="add" ...></fa-icon>

现在，我想集中管理图标并将其外包给服务，因此我可以使用以下语法来获取它们。

constructor(private sir: SirService) { }
add = this.sir.willGiveMeIconFor("add"); ...

到目前为止，一切对我来说都是显而易见的。但是，现在，我无法决定是否应该依赖上面显示的分配，还是将整个服务都提供给模板。由于必须公开该服务才能使模板看到它，因此我必须使用类似的内容。

constructor(private sir: SirService) { this source = sir; }
public icons: SirService;
//add = this.sir.willGiveMeIconFor("add"); ...

并且在模板中（当然，在重命名服务中的方法以使其语义更好之后）。

<fa-icon [icon]="icons.show('add')" ...></fa-icon>

有人告诉我，在构造函数中将服务声明为公共是不好的做法。我也感觉到我没有明显的理由保留了对其的多个引用。由于我还没有使用这种策略来做事情，因此我要谨慎行事，不要再碰壁了。

我还考虑过使用完全不同的方法-例如通过指令或管道。但是，我没有足够的信心做出判断。由于这种重构将涉及面很广，因此我更喜欢在实施该理论之前先对其进行了解。

与我发现的问题最接近的是this answer，但它甚至不足以缓解我的担忧。

Answer 1

我将首先在这里精确定义我们的需求。

• 我们不想切换到其他组件来支持此功能（然后如您所显示的那样注入服务），
• 我们不想在使用FA的所有组件中都提供这种服务（写很多东西我们会从中受益），
• 我会争论是否需要此服务作为这些组件的逻辑部分，
• 作为最终结果，我们希望将一个值从服务中拉到[icon]指令，我认为这是遵循约定的答案。

然后我将创建一个名为``myApp-fa-icon`或类似名称的共享指令，并放置一个服务，甚至可能在应用程序中公开一些图标的枚举，因为现在我们真的从字符串解决方案切换了到另一个字符串解决方案（但集中化）。然后，在此指令中，我将只接受该枚举，而不接受字符串（但是有将这个枚举导入每个组件的麻烦，所以也许这不是一个好主意）。

并且为了创建服务public，您不需要将其重新分配给public字段，只需根据需要在构造函数中将其设置为public。