Этот вопрос сводится к следующему: как наилучшим образом реализовать компонент Angular, который рисует ограничивающую рамку вокруг набора других компонентов Angular?
В частности, мне не ясно, как это сделать водин угловой цикл рендеринга.Моя проблема в том, что прежде чем я смогу определить расположение компонента ограничивающего прямоугольника, мне нужно знать положения других компонентов (которые определены браузером / CSS), но при наличии изменений они обновляются только после того, как ямогу запросить их (из DOM) из моего компонента ограничительной рамки.
Подробности:
У меня есть компонент, который в основном содержит несколько диаграмм Ганта: каждая диаграмма состоит из нескольких строк, и каждая строка содержит несколько элементов.Эти элементы могут быть выбраны, и я должен нарисовать ограничивающий прямоугольник вокруг всех выбранных элементов (которые могут находиться на разных графиках)Базовые данные хранятся в избыточном количестве.
Я бы предположил, что ограничивающий прямоугольник реализован как компонент, который абсолютно расположен поверх моего основного компонента (но это вопрос для обсуждения).До настоящего времени все вычисления позиций (позиции диаграмм и позиции элементов в диаграммах) выполнялись через браузер / CSS.Поэтому я не знаю (абсолютных) положений элементов в пикселях, пока не сделаю запрос в DOM.
Таким образом, моей первой мыслью было запросить DOM, чтобы получить ограничивающий прямоугольник для каждого выбранного элемента ииспользуйте эту информацию для визуализации ограничительной рамки.Однако, если один из выбранных элементов изменится (будет изменен, добавлен или удален) в избыточном коде, я не уверен, когда в угловом жизненном цикле я смогу безопасно запросить DOM, чтобы нарисовать ограничивающий прямоугольник.Чтобы избежать работы с устаревшими позициями элементов, я могу запрашивать DOM только после его обновления для элементов.Однако, насколько я понимаю, Angular сначала пересчитает все компонентов (включая мой компонент ограничивающего прямоугольника) и только затем дотронется до DOM (таким образом, компонент ограничивающего прямоугольника будет размещен на основе позиций старого элемента.)
До сих пор я вижу следующие два способа решения проблемы:
Запуск дополнительного события / галочки для обновления ограничивающего прямоугольника после обновление предметов завершено (например, с использованием setTimeout()). Однако мне не нравится этот подход, потому что такой двухэтапный процесс мне кажется неправильным.
Избегайтевообще запрашивать DOM, выполняя всю логику компоновки в моем приложении, а не позволяя браузеру делать эту работу за меняЗдесь мне не нравится, что мне внезапно приходится реализовывать много логики компоновки (позиционирование отдельных диаграмм и позиционирование элементов внутри диаграмм), которой раньше хорошо управлял браузер / css.
Поскольку мне не нравятся эти два подхода, я надеюсь, что кто-то может направить меня в лучшем направлении.Можно ли каким-то образом гарантировать, что angular обновляет DOM для всех элементов и только потом обрабатывает компонент ограничивающего прямоугольника (без необходимости использовать setTimeout() или что-то подобное)?Или я просто ошибаюсь из-за своих опасений относительно подходов (1) или (2), и один из них в порядке?
Спасибо за любые подсказки!