从哑/表示组件调用服务中的可观察对象的最佳方法

Question

我在 Angular 中使用智能/哑组件模式，这意味着不允许哑子组件注入服务。在我正在创建的哑子组件中，有一个带有单击事件的按钮，该按钮应导致调用智能父组件中注入的服务中的可观察方法。从哑组件单击事件将调用连接到服务可观察方法的最佳方法是什么？

我可以将事件从哑组件发送到父组件，然后在父组件的调用方法中创建对服务方法的订阅。但这意味着显式订阅，这意味着需要显式取消订阅。如果我可以使用异步管道会更好。我宁愿使用 @input 将服务方法绑定到哑组件，然后调用：

(click)="observable$ | async"

但这不是 click 事件的有效语法。

那么最好的方法是什么呢？

Answer 1

您可以在父级中处理取消订阅或在父级中使用异步管道。通常点击是一系列事件的触发器。您可以将它们链接起来，并通过异步管道在视图中使用它。例如

假设是点击获取用户数据

// child comp
this.childClickEvent=new EventEmitter()
// child view 
<button (click)="childClickEvent.emit()"></button>
// parent comp
this.childClick=new Subject()
this.userdata=childClick.pipe(switchMap(_=>http.get(userUrl)))
// parent view
<child-comp (childClickEvent)="childClick.next()"></child-comp>
<section *ngIf="userdata | async">{{userdata.name}}</section>