Angular在模板中使用服务方法是否是反模式

Question

我想知道在模板中使用服务方法是否是Angular6中的反模式：

根据实例

component.ts

constructor(public myService: MyService) {}

component.html

<div>{{myService.getItems() | async}}</div>

Answer 1

是的。您应该将方法返回的observable分配给组件中的属性，然后在模板中使用它。

myObservable$;

constructor(private myService: MyService) {}

ngOnInit() {
    this.myObservable$ = this.myService.getItems();
}

在您的模板中：

<div>{{myObservable$ | async}}</div>

原因

这样做有几个原因。

1. 此实现具有更好的关注点分离。它从模板中隐藏了实现逻辑。模板只需要了解Observable。不需要知道诸如Component从何处确切获得此值之类的信息。它调用了哪个服务的哪个方法来获得可观察的结果？
2. 它促进了可以进行更好的单元测试的模式。如果您在模板中调用服务的方法，则将无法执行此操作。

Answer 2

在大多数情况下，由于注释中已经提供了原因，例如，可能是一个坏主意。 link Sachila发表或在答案中提到了Siddharth。

尽管如此，即使在Tour of Heroes中，它们也确实可以直接访问服务，但是似乎只是在访问属性而不是方法，特别是访问执行昂贵操作的方法。