直接从 HTML 模板访问服务和“自我”？答案

【问题标题】：Access service and 'self', directly from HTML template?直接从 HTML 模板访问服务和“自我”？
【发布时间】：2019-08-16 00:22:53
【问题描述】：

在Angular 6 中，要从服务访问我们的组件属性，我们将“self”从组件传递给服务。例如：

myComponent.ts

public myButton;

constructor(private myService: MyService) 
{
    super();
}

ngOnInit() {
    this.myButton = document.getElementById("my-button");
}

saveFunction() {
    var self = this;
    this.myService.myServiceFunction(self)
}

my.service.ts

myServiceFunction(p_self)
{
  ...do stuff
  p_self.myButton.classList.remove("btn-danger");
}

这允许我们从共享服务访问组件的按钮元素。

A)：我可以直接从 HTML 模板调用我的服务吗？

B)：有没有办法将self 从 HTML 模板传递给服务？从 HTML 我希望能够：

my.component.html

<button (click)=this.myService(self)></button>

当然，上面的方法是行不通的——这只是一个固有的错误想法吗？

【问题讨论】：

这看起来像是一个 Angular 反模式。除非绝对必要，否则不应直接访问 DOM 元素。将服务方法封装在组件方法中，任何需要从服务发回的响应都可以在组件中处理。
如果真的要从模板访问服务，为什么是private？
服务包含业务逻辑，组件包含展示和交互逻辑。模板不应真正包含任何逻辑。
我认为直接访问 DOM 元素没有任何问题。但最好的方法是创建一个将传递事件的方法，然后从事件中获取元素——这是最常见和最好的方法。至于在模板中访问服务，这是个坏主意。有时我们只是为了“好的逻辑”而继续编写更多的代码。例如，您在模板中配置服务的方式只是传递 self，它没有价值，因为它仅在调用 saveFunction() 时设置。
这是一篇很好的文章，对直接在 Angular 中操作 DOM 时出现的问题进行了一些解释。 TL;DR 版本是 Angular 通过它自己的数据结构处理事情，如果你自己操作这些数据结构并不会更新。 blog.angularindepth.com/…

标签： html angular typescript service self

【解决方案1】：

您应该在服务中执行逻辑并返回一些输出。然后在组件中获得该输出，并基于该输出对视图进行操作。所以在你的情况下，流程应该是相反的。从服务到组件再到视图。

【讨论】：