Мощь селекторов в Angular: объяснение на практическом примере

Мощь селекторов в Angular: объяснение на практическом примере

От автора: вашему вниманию предлагается статья, посвященная изучению фреймворка AngularJS. При работе со сторонними компонентами бывает нужно подключить отсутствующий функционал. Приведем Angular пример — для этого возьмем компонент кастомный чекбокс.

Мощь селекторов в Angular: объяснение на практическом примере

Вам нужен этот компонент, но беда в том, что он не поддерживает доступность.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Менять код вы точно не будете, тогда как обойти эту проблему с помощью Angular?

«Нам доступна вся мощь селекторов.»

Мы можем создать директиву, которая будет ссылаться на этот input по классу, после чего с помощью Angular API можно добавить все что угодно. (поддерживаемые типы селекторов можно найти по ссылке).

Мощь селекторов в Angular: объяснение на практическом примере

Хорошо, но осталась еще одна проблема. Angular в нашем приложении будет проверять привязки директивы для каждого цикла обнаружения изменений. В большинстве случаев оно нам не нужно, если, конечно, у нас нет динамических значений типа aria-checked.

Решить эту проблему можно с помощью ChangeDetectorRef API.

С помощью метода detach() мы отделяем детектор изменений от дерева детектора изменений. Отделенный детектор изменений не будет работать, пока не будет выполнен метод reattached.

В нашем случае мы можем использовать метод detectChanges() для выполнения проверок локальных изменений только в динамических частях. (как aria-checked).

Автор: Netanel Basal

Источник: https://netbasal.com/

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий