时间戳

首页 > 解决方案 > 如何最好地将子组件的输出视为流

angular - 如何最好地将子组件的输出视为流

问题描述

在我的应用程序中，我有一个组件更愿意将子组件的输出视为流，而不是使用事件处理程序处理它。换句话说，像

模板：

<child-component (output)="onOutput($event)"></child-component>

零件：

output$: Subject<any>;

ngOnInit() {
  this.output$
    .pipe(preprocessFilterAndMapPipe)
    .subscribe(output => console.log("got output", output));
}

onOutput(output) { this.output$.next(output); }

如果你明白我的意思。我想知道是否有更精简的方式来写这个。

一种想法是将主题传递给子组件，并让该子组件next将其发射到该主题，而不是以正常的、基于 EventEmitter 的方式输出，如下所示：

子组件：

@Input() output$: Subject<any>;

onSomeEvent() { this.output$.next(someData); }

但这似乎隐约违反了@Inputand的预期语义@Output。

我可以编写以下内容，这样就省去了编写事件处理程序的麻烦，只是为了将事件放在我的 observable 上，但它看起来很难看：

<child-component (output)="output$.next($event)"></child-component>

是否有任何已知的模式可以做到这一点？装饰师可以帮忙吗？

另一方面，有没有办法从父组件知道子组件的输出已“终止”？换句话说，什么时候eventEmitter.complete()被调用？

标签： angularrxjsreactive-programmingangular-components

解决方案

这取决于通信中涉及的组件。如果您的数据必须向上传递层次结构(parent->grand-parent)，那么@Output()就可以完成这项工作。如果它必须用于其他一些组件，那么您必须在 shared 内部实现publish/subscribe概念使用。rxjs/SubjectService

推荐阅读