PricingLoginStart free
Angular Academy · Урок

Создание повторно используемого поведения

Оформляйте поведение в виде компонуемых директив

Урок 3 из 413 шагов

«Создание повторно используемого поведения» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Поведения как строительные блоки

API композиции особенно полезен при создании небольших специализированных директив, каждая из которых инкапсулирует одно поведение, а затем при необходимости добавляется к компонентам.

Директива одного назначения

Делайте каждое поведение небольшим и автономным.

@Directive({
  selector: '[appElevate]'
})
export class ElevateDirective {
  @HostBinding('style.boxShadow')
  shadow = '0 2px 8px rgba(0,0,0,.15)';
}

Поведение при наведении

Другое поведение отслеживает наведение и переключает класс.

@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
  @HostBinding('class.is-hover') hovering = false;
  @HostListener('mouseenter') on() { this.hovering = true; }
  @HostListener('mouseleave') off() { this.hovering = false; }
}

Композиция поведений

Компонент карточки объединяет оба поведения без настройки в шаблоне.

@Component({
  selector: 'app-card',
  hostDirectives: [ElevateDirective, HoverClassDirective],
  template: '<ng-content></ng-content>'
})
export class CardComponent {}

Повторное использование в компонентах

Те же поведения можно добавлять к кнопкам, плиткам или панелям. Определите их один раз и используйте повсюду без дублирования.

Настраиваемые поведения

Добавьте входные параметры, чтобы сделать поведение настраиваемым, а затем откройте их там, где оно скомпоновано.

@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
  level = input(1);
}

Открытие настройки

Откройте настраиваемый входной параметр, чтобы каждый хозяин мог задать его.

hostDirectives: [{
  directive: ElevateDirective,
  inputs: ['level']
}]

Координация поведений

Поведения могут внедрять друг друга через инжектор элемента для координации, например когда эффект ряби реагирует на состояние нажатия.

Тестируемость

Небольшие поведения легко отдельно проверять модульными тестами, а затем надёжно использовать в составе композиции, повышая общую надёжность.

Соглашения об именовании

Называйте поведения по выполняемому действию (appElevate, appHoverClass, appAutofocus). Понятные имена делают композицию самодокументируемой.

Библиотека поведений

Со временем Вы создадите библиотеку компонуемых поведений, к которым сможет подключиться любой компонент, значительно сократив повторяющуюся логику хозяина.

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете повторно используемые поведения.

Ответь в интерактивном уроке

Итоги

Вы научились проектировать небольшие автономные директивы, каждая из которых инкапсулирует одно поведение, компоновать их с помощью hostDirectives, открывать настраиваемые входные параметры и создавать повторно используемую библиотеку тестируемых поведений.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
38
Уроки
144
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Создание повторно используемого поведения» бесплатный?

Да — полный текст урока «Создание повторно используемого поведения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Создание повторно используемого поведения»?

Оформляйте поведение в виде компонуемых директив Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Создание повторно используемого поведения»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Свойство hostDirectives
  2. Предоставление входных и выходных данных
  3. Создание повторно используемого поведения
  4. Композиция и наследование
← Назад к Angular Academy