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

在我的大多数组件中，我使用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) { this source = sir; }
public icons: SirService;
//add = this.sir.willGiveMeIconFor("add"); ...

到目前为止，一切对我来说都是显而易见的。然而，现在我无法决定是依赖上面所示的分配，还是将整个服务公开给模板。因为我必须公开该服务以供模板查看，所以我必须使用类似的东西

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

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

在模板中（当然，在重命名服务中的方法以获得更好的语义之后）

我被告知在构造函数中将服务声明为public是一种糟糕的做法。我还感觉到，我没有明显的理由就保留了对它的多次引用。由于我没有使用这种策略来做事情，所以我很小心，不要再往前撞墙了

我也考虑过使用一种完全不同的方法，例如通过指令或管道。然而，我没有足够的信心做出判断。由于这样的重建将是相当广泛的，我更愿意在开始实施之前理解理论

---

我发现的最接近我的问题是，它甚至没有提供足够的信息来缓解我的担忧。

首先，我要准确地定义我们在这里需要什么

• 我们不想切换到其他组件来支持这一点（然后注入服务，如您所示）
• 我们不希望在所有使用FA的公司中都有这样的服务（我们从中获益的感觉远不止于此）
• 我想说的是，如果这个服务作为这些组件的逻辑部分是必要的
• 最后，我们希望从服务中提取一个值到

  [icon]

  指令，我认为这是遵循约定的答案

然后，我会创建一个名为

myApp fa icon

的共享指令，或者类似的东西，并在那里放置一个服务，甚至可能为应用程序中的图标公开一些枚举，因为现在我们实际上正在从字符串解决方案切换到另一个字符串解决方案（但集中）。然后在这个指令中，我只接受这个枚举，而不是一个字符串（但是当您想用图标动态地做一些事情时，在每个组件中导入这个枚举是件麻烦事，但另一方面，它会缩小要使用的图标列表）

对于创建公共服务，您不需要将其重新分配到公共字段，只要在构造函数中设置它

public

编辑：我也按照你的建议考虑过管道，但我只能看到使用它的一个主要好处：纯管道。我假设这些图标不会改变，所以大部分时间不会对管道进行评估，但是

这看起来很尴尬：

[icon]=“添加|我的图标”

如果我们很固执，我们可以声明一个无参数指令，它将获得

[icon]

的输入，作为

@input（）

和

ngochanges（）

我们可以跳过所有的逻辑（所以类似这样：

，但再一次-我觉得有点奇怪

这真的有区别吗？这不像确定一个图标是一个非常繁重的操作

编辑：

好的，我创建了一个emaple myselft，我必须说我倾向于创建自定义组件，它将充当

fa图标的代理。它远没有使用指令复杂，可读性更高

1） 指令将劫持
[icon]
属性的值，将其替换为从服务加载的值，并强制Angular检测更改，以使
fa icon
的
icon
指令执行其工作。非常复杂，抱歉，我认为
fa图标
元素的工作方式有点不同

这是工作流程。
因此，为了验证我是否正确理解了您。你不赞成注入服务来提供图标。您建议采用基于指令的方法。对的那么，让我们假设我加入一个指令——它将如何确定要生成哪个图标？你是说你会对每种类型的图标使用不同的指令吗？也许你可以展示一两行文字，说明如何使用它。（我可以根据文件制定出指令部分。）详细说明我的要求——根据我的要求，指令有三种类型，当我阅读它们的定义时，我在每一种指令中都认可你的建议。所以我不确定我是否充分理解了你的观点。嗨，我现在必须离开，稍后（2小时内）我会提供一些例子，但是如果你感兴趣，你可以看看
src/app/highlight.directive.ts（摘录）
该文档中的示例，注入一个服务并通过
@Input（）提供一个合适的图标
@KonradViltersten查看我的最新答案，最底层。