将不同的多个Angular组件组合在一起的设计模式

Question

我有一个Angular6应用。该应用程序有多个页面。每个页面由多个组件组成。这些组件基本上有两种类型：过滤器组件和网格组件。筛选器组件提供有关如何在网格中筛选数据的输入。这些过滤器输入可以是异步的。

<page>
 <filter-1></filter-1>
 <filter-2></filter-2>
 <filter-3></filter-3>
 <grid filters="filtersForData"></grid>
</page>

page.component.ts

 filtersForData = [];
 callbackForFilter1(filter) { filters.push(filter)} // async
 callbackForFilter2(filter) { filters.push(filter)} // synchronous
 callbackForFilter3(filter) { filters.push(filter)} // async

现在一切正常。但是，我想以一种方式设计以上内容，除非拥有所有过滤器，否则不要加载网格。原因是某些调用本质上是异步的，网格引发了ExpressionChangedAfterEvaluation错误。 一个想法的过程也是使所有过滤器异步或不返回可观察对象，并且一旦完成所有可观察对象，则仅加载网格。 但是，这带来了编写和保持可观察性的另一个挑战。 同样，在不同时间进入的多个过滤器也会导致我要避免的多重onChanges触发器。 如何实现以上目标？