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

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

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

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

@Component({
  selector: 'ngx-checkbox',
  template: `
 <input type="checkbox" class="ngx-checkbox"> {{label}}
  `,
})
export class CustomCheckboxComponent {
  @Input() label;
}

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

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

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

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

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

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
@Directive({
  selector: '.ngx-checkbox'
})
export class CustomCheckboxAddonsDirective {
  @HostBinding('attr.role') role = 'checkbox';
  @HostBinding('attr.aria-checked') checked = false;
  @HostBinding('attr.tabindex') tabIndex = 0;

  @HostListener('change', ['$event.target.checked'])
  change( checked ) {
 this.checked = checked;
  }

}

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

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

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

@Directive({
  selector: 'ngx-checkbox input[type="checkbox"]'
})
export class CustomCheckboxAddonsDirective {
  @HostBinding('attr.role') role = 'checkbox';
  @HostBinding('attr.aria-checked') checked = false;
  @HostBinding('attr.tabindex') tabIndex = '0';

  constructor( private cdr : ChangeDetectorRef ) {}

  ngAfterViewInit() {
 this.cdr.detach();
  }

  @HostListener('change', ['$event.target.checked'])
  change( checked ) {
 this.checked = checked;
 this.cdr.detectChanges();
  }

}

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

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

Автор: Netanel Basal

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Научиться

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree