Мы можем использовать декоратор ViewChildren, чтобы получить QueryList элементов или директив из представления DOM. В этой статье мы рассмотрим, как мы можем использовать эту технику, чтобы управлять фильтрами наших приложений многоразовым, эффективным и понятным способом.
Вот иллюстрация окончательного результата:
Представьте, что мы находимся на странице, которая отображает список ресурсов, и пользователи могут фильтровать список по ресурсу type или по ресурсу level.
Чтобы сообщить серверу, как фильтровать ресурс, мы будем использовать стиль строки запроса, в котором мы определяем текущие фильтры. Например:
https://api.com/resources?type=video&level=beginner
Наша цель:
Каждый раз, когда пользователь нажимает на фильтр, нам нужно получить последнее значение из каждого фильтра и создать новую строку запроса.
К счастью, у нас есть оператор Rx именно для такой функциональности - combineLatest.
Сообщите мне, когда излучает какой-либо Observable, но также сообщите мне последнее значение от других. (Массив)
Давайте создадим компонент filters. Это будет наша последняя разметка:
Интерфейсы
Интерфейс Filter в основном предназначен для пользовательского интерфейса. ActiveFilter предназначен для сервера. group относится к ключу строки запроса, например:
https://api.com/resources?level=beginner
В URL-адресе about group относится к level.
Компонент фильтров
У нас есть два Inputs, имя группы и массив фильтров.
Оператор combineLatest ожидает получить список наблюдаемых. Нам нужно создать наблюдаемое, которое будет генерировать активный фильтр каждый раз, когда пользователь нажимает на фильтр.
Но есть одна загвоздка: нам нужно получить исходные данные, поэтому нам также нужно выдать значение из каждого на этапе инициализации компонента. Мы можем решить эту проблему с BehaviorSubject.
BehaviorSubject принимает начальное значение и немедленно передает его.
Нам нужно найти активный filter из filters Input; затем нам нужно создать наш BehaviorSubject и испустить текущий фильтр id с group.
Теперь давайте проверим HTML и добавим событие click.
Код прост, давайте перейдем к select() методу, который будет запускаться каждый раз, когда пользователь нажимает на фильтр.
Нам нужно изменить состояние active для каждого фильтра; тогда нам нужно создать новый активный filter.
Компонент готов к использованию. Наконец самое интересное.
Теперь нам нужно получить наблюдаемое от каждого filters компонента. Мы собираемся использовать декоратор ViewChildren, чтобы получить компоненты фильтров из текущего представления.
Большой! Теперь у нас есть экземпляры фильтров, поэтому мы можем получить доступ к наблюдаемому changeFilter. Последний шаг - использовать combineLatest.
Каждый раз, когда один из фильтров выдает значение, мы собираемся получить массив, содержащий каждое значение фильтра, преобразовать их в строку запроса и отправить на наш сервер.
Это все.
Вы можете извлечь этот код в автономный модуль и использовать его.
Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Akita, Angular и JS!
👂🏻 И последнее, но не менее важное: слышали ли вы об аките?
Акита - это модель управления государством, которую мы разработали здесь, в Datorama. Он успешно используется в среде производства больших данных более семи месяцев, и мы постоянно добавляем в него функции.
Акита поощряет простоту. Он избавляет вас от хлопот по созданию шаблонного кода и предлагает мощные инструменты с умеренной кривой обучения, подходящие как для опытных, так и для неопытных разработчиков.
Я очень рекомендую это проверить.
