Как Angular v22 решил проблему дублирующихся host directives

Вот важная новость с фронта ИИ: MillerSvt 1 минуту назад Как Angular v22 решил проблему дублирующихся host directives Средний 7 мин 22 Блог компании Т-Банк Angular * Обзор Привет, Хабр! Я Святослав Зайцев, занимаюсь разработкой Angular-приложений и внутренних библиотек компонентов в Т-Банке. Недавно в Angular v22 появилось изменение, которое прошло почти незаметно на фоне более громких новинок.

Тем не менее оно снимает одно из ключевых ограничений Directive Composition API. Если вы используете hostDirectives для переиспользования поведения между директивами и компонентами, то могли сталкиваться с ситуациями, когда вполне логичная композиция внезапно заканчивалась ошибкой NG0309. В статье разберем, почему так происходило раньше, что изменилось в Angular v22 и как новый механизм дедупликации host directives влияет на архитектуру компонентов и дизайн-систем.

Технические детали

Как host directives работали до Angular v22Directive Composition API позволяет директивам и компонентам подключать другие директивы к своему host-элементу через hostDirectives. Например:@Directive({ host: { '': 'true', }, }) export class @Directive({ selector: '', hostDirectives: , }) export class @Directive({ selector: '', hostDirectives: , }) export class Пока все выглядит вполне логично. AppearanceDirective содержит общий визуальный функционал, а ButtonDirective и DropdownItemDirective его переиспользуют.

Но реальные UI-примитивы часто комбинируются. Один и тот же элемент вполне может одновременно быть и кнопкой, и пунктом выпадающего меню: Settings До Angular v22 фреймворк обходил обе цепочки директив и находил AppearanceDirective дважды на одном элементе:appButton └─ AppearanceDirective appDropdownItem └─ AppearanceDirectiveВ результате появлялась ошибка:NG0309: Directive AppearanceDirective matches multiple times on the same element. Directives can only match an element once.

Проблема заключалась не в том, что разработчик явно добавил одну и ту же директиву дважды. Дубликат возникал косвенно — как следствие переиспользуемой композиции. Из-за этого hostDirectives становились хрупким инструментом.

Отраслевые последствия

Авторам библиотек приходилось заранее учитывать все возможные комбинации директив. Общая базовая директива могла внезапно стать непригодной для использования, если две более высокоуровневые директивы оказывались на одном элементе. Обычно проблему решали одним из трех способов:убирали общую host-директиву из одной из веток;дублировали логику;создавали специальные версии директив для отдельных случаев.

Все эти варианты усложняли поддержку библиотек. Это ограничение обсуждалось в Angular Issue #57846, а реализация нового поведения появилась в PR #67996. Что изменилось в механизме обработки host directives в Angular v22На мой взгляд, самое важное изменение состоит из двух частей.

Приоритет получает директива из шаблона.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.