С течением времени я снова и снова приходил к тому моменту, когда было очень сложно проектировать элементы, реагирующие с помощью CSS, особенно при использовании внешних компонентов из библиотек или фреймворков.
Служба TL; DR
Angular, которая в центральной точке отслеживает изменения размера окна и возвращает значение, например [s, m, l, xl] в наблюдаемом на основе медиа-запросов.
Пример
Я использую внешний компонент, написанный другим разработчиком, например слайдер для отображения статей, в зависимости от размера экрана количество статей должно меняться.
Количество статей в слайдере определяется через объект JavaScript, этот объект передается внешнему компоненту, в данном случае слайдеру.
Проблема
Ползунок выполняет серию проверок в зависимости от количества переданных статей и текущей ширины экрана. Например, ширина статей внутри ползунков или их расстояние друг от друга. Это делает очень трудным определение количества статей впоследствии через CSS или даже невозможным без головной боли. Но нам нужно!
Проще говоря
Это означает, что мне нужно знать максимальное количество статей в моем классе JavaScript или TypeScript на основе текущего размера экрана, чтобы передать их компоненту слайдера.
Решение
Было бы здорово, если бы вы могли определить диапазон, например. между 301px и 600px
нам нужно 3 статьи, между 601px и 900px нам нужно 5 статей, и все выше заполнено 6 статьями.
Может быть, что-то в этом роде?
Служба, которая проверяет, был ли медиазапрос, например, «min-width: 575px» превышен или занижен, и запускает наблюдаемое только в случае соответствующего изменения.
Таким образом, в нашем классе, который вызывает внешний компонент, мы можем определить объект конфигурации для ползунка (см. Рисунок выше «Пример использования») на основе возвращаемого значения в наблюдаемом из нашего нового
angular- точка останова-наблюдатель.
