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

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

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

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

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

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

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

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

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

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

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

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

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

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

Автор: Netanel Basal

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

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

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Подробнее

Метки:

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

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

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

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