Свойство hostDirectives
Подключайте директивы к хосту компонента
«Свойство hostDirectives» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
API композиции директив
API композиции директив позволяет компоненту или директиве декларативно применять другие директивы к собственному хост-элементу через свойство hostDirectives. Это обеспечивает повторное использование без наследования.
Какую проблему это решает
Раньше для повторного использования поведения директивы приходилось добавлять её в каждый шаблон или использовать наследование. hostDirectives напрямую объединяет поведения на хост-элементе.
Базовый синтаксис
Перечислите директивы в массиве hostDirectives метаданных компонента.
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}Что происходит
Angular автоматически применяет CdkTrapFocus к каждому хост-элементу app-menu. Компоненты получают это поведение без необходимости добавлять директиву вручную.
Требования
Хост-директивы должны быть автономными. Ссылайтесь непосредственно на класс директивы, а не на её селектор.
Несколько хост-директив
Объединяйте несколько поведений, перечисляя их все.
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]Применение к директиве
Директива также может иметь хост-директивы, что позволяет создавать многоуровневые и составные поведения.
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}Порядок жизненного цикла
Хост-директивы создаются до выполнения логики собственного конструктора хоста, поэтому их настройка доступна во время инициализации хоста.
Внедрение зависимостей
Хост-директивы можно внедрять в хост (и наоборот) через инжектор элемента, обеспечивая взаимодействие между составными поведениями.
private trap = inject(CdkTrapFocus);Без изменений в шаблоне
Главное преимущество: пользователям app-menu не нужно знать о CdkTrapFocus. Поведение инкапсулировано в определении компонента.
Когда это использовать
Используйте hostDirectives, чтобы аккуратно и повторно использовать сквозные поведения (ловушку фокуса, эффект ряби, аналитику) в компонентах или директивах.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли hostDirectives.
Повторение
Вы узнали, что свойство hostDirectives автоматически применяет автономные директивы к хост-элементу компонента или директивы, обеспечивая повторное использование поведения с помощью композиции, без изменений шаблонов и наследования.
Часто задаваемые вопросы
Урок «Свойство hostDirectives» бесплатный?
Да — полный текст урока «Свойство hostDirectives» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Свойство hostDirectives»?
Подключайте директивы к хосту компонента Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Свойство hostDirectives»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Свойство hostDirectives
- Предоставление входных и выходных данных
- Создание повторно используемого поведения
- Композиция и наследование