Angular 依赖项最佳实践 - 可以在 component.html 中引用其 component.ts 以外的 ts 文件吗？

Question

我最近和我团队的一个朋友发生争执。我们有这个 experiment-row.component.html 文件，其中包含以下代码：

*ngIf="experimentsPageService.isRegularStatusIconVisible(experiment)"

我认为，在我们的案例 experiment-row.component.ts 中，您的 html 文件将依赖于除 component.ts 之外的任何 class 是一种不好的做法，我们可以避免通过创建

isRegularStatusIconVisible(experiment) {
     return experimentsPageService.isRegularStatusIconVisible(experiment)
}

在实验行内。component.ts。另一方面，它是组件文件中的装饰功能，这并非完全错误。我在 angular's styling guide 中搜索了很多，但没有找到有关该问题的任何信息。

这个问题有什么最佳实践吗？我的 component.html 知道我的所有服务可以吗？

如果有官方资源也请分享

Answer 1

一个朋友发现了一个不同的问题，但只有那个问题的答案。

经理可以标记为重复但保留问题吗？因为这个问题很难找到，因为它问的是非常不同的东西，但答案正是我要找的那个。

编辑：这是 angular 教程中的代码：

<div *ngIf="messageService.messages.length">

  <h2>Messages</h2>
  <button class="clear"
          (click)="messageService.clear()">clear</button>
  <div *ngFor='let message of messageService.messages'> {{message}} </div>

</div>

看起来像是 angular 并没有将其定义为最佳实践，因为它没有在官方文档中使用该模式 https://angular.io/tutorial/toh-pt4.

Answer 2

我对这个话题的看法：

Is there any best practice for that issue? is it OK that my component.html will know all my services?

您的组件依赖于某些服务，因为您将它们注入该组件的模块或组件本身。 component.html 不依赖于此类服务，但它依赖于某些可调用的对象结构，例如“experimentsPageService.isRegularStatusIconVisible（实验）”。所以模板不关心 experimentsPageService 背后是否有真正的服务或类似这样的服务：

public experimentsPageService = {isRegularStatusIconVisible:(x) => x}

所以我觉得还是看个人喜好吧

但是还有一件事你真的应该关心：你的两个调用都是模板中的函数调用，这可以看作是不好的做法，因为这个方法是每次更改检测循环运行时调用（您可以通过函数内的 console.log 轻松验证）。

Angular 依赖项最佳实践 - 可以在 component.html 中引用其 component.ts 以外的 ts 文件吗？

Angular dependencies best practice - is it OK to reference ts file other than its component.ts in a component.html?

dependencies

angular