我有以下情况：在父组件中，我有一个盒子列表（异步加载并存储为NgRx实体）。
<app-box *ngFor="let box of boxes$ | async"
[items$]="items$"
></app-box>
在每个框中，我都有一个项目列表（也存储在NgRx中）。
<app-item *ngFor="let item of items$ | async"></app-item>
出于性能原因，所有组件都具有ChangeDetection: OnPush，并且所有组件都是哑巴，但父组件却具有对NgRx的引用，该引用通过@Input传递给子组件。
我需要另一个表示两个项目之间连接的组件列表。每个连接由一个左项目和一个右项目建立。一对数组已经存储在NgRx中，但是为了绘制连接两边的线，我需要引用连接末尾的两个DOM元素（项目）（库我正在使用像这样的作品。）
我想使所有组件尽可能地愚蠢（只有父组件是聪明的），并且我想避免通过subscribe在父组件中进行订阅。如果这样做，则需要手动触发更改检测器（我使用的是async pipe，它会自动执行此操作）。
所有组件都必须保留ChangeDetection: OnPush。
如何设计最后的架构？每个项目都可能发出AfterInit，以便家长知道哪些项目可以“从DOM中读取”，但是我应该在哪里存储这些信息？
还要记住，连接列表是async并且来自服务器，所以我不知道哪个首先初始化：连接存储还是项目组件。
我的最终目标是要对建立连接的项目使用2个DOM引用，同时要考虑到项目，连接和盒子都是动态且异步加载的。