Question

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

我可以从哑组件向父组件发出事件，然后在父代的被调用方法中创建对服务方法的预订。但这意味着需要明确的订阅，这意味着需要明确的取消订阅。如果可以使用异步管道，那就更好了。我宁愿只使用@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>

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

1 个答案: