У меня следующая ситуация: в родительском компоненте у меня есть список блоков (загружается асинхронно и сохраняется как сущность 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 (элементы), которые находятся в конце соединения (библиотека I 'работает следующим образом).
Я хочу, чтобы все компоненты были настолько тупыми, насколько это возможно (только родитель является умным), и я хотел бы избежать подписок в родительском компоненте через subscribe.Если бы я это сделал, мне бы пришлось вручную активировать детектор изменений (вместо этого я использую async pipe, который делает это автоматически).Все компоненты должны сохранять ChangeDetection: OnPush.
Как мне спроектировать этот последний образец архитектуры?Каждый элемент может выдавать AfterInit, так что родитель знает, какие элементы готовы для «чтения из DOM», но где я должен хранить эту информацию?
Помните также, что список соединений async и поступает с сервера, поэтому я не знаю, что инициализируется первым: хранилище соединений или компоненты элементов.
Моя конечная цель - получить 2 ссылки DOM на элементы, которые устанавливают соединение,принимая во внимание, что элементы, соединения и ящики все динамически загружаются асинхронно.