Перейти к содержанию

Селекторы компонентов

📅 30.09.2026

Этот материал предполагает, что вы уже прочитали руководство по основам. Если Angular для вас в новинку, начните с него.

Каждый компонент задаёт CSS-селектор, который определяет, как компонент используется:

1
2
3
4
5
@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }

Компонент используют, создавая подходящий HTML-элемент в шаблонах других компонентов:

1
2
3
4
5
6
7
@Component({
  template: `
    <profile-photo />
    <button>Upload a new profile photo</button>`,
  ...,
})
export class UserProfile { }

Angular сопоставляет селекторы статически на этапе компиляции. Изменение DOM во время выполнения — через привязки Angular или через API DOM — не влияет на то, какие компоненты отрисованы.

Элемент может совпасть ровно с одним селектором компонента. Если с одним элементом совпало несколько селекторов, Angular сообщает об ошибке.

Селекторы компонентов чувствительны к регистру.

Виды селекторов

В селекторах компонентов Angular поддерживает ограниченный набор базовых типов CSS-селекторов:

Тип селектора Описание Примеры
Селектор типа Совпадает с элементами по имени HTML-тега, то есть по имени узла. profile-photo
Селектор атрибута Совпадает с элементами по наличию HTML-атрибута и, при необходимости, по точному значению этого атрибута. [dropzone] [type="reset"]
Селектор класса Совпадает с элементами по наличию CSS-класса. .menu-item

Для значений атрибута Angular умеет сравнивать точное значение оператором равенства (=). Другие операторы сравнения значений атрибута не поддерживаются.

Селекторы компонентов не поддерживают комбинаторы, в том числе комбинатор потомка и дочерний комбинатор.

Селекторы компонентов не поддерживают пространства имён.

Псевдокласс :not

Angular поддерживает псевдокласс :not. Его можно дописать к любому другому селектору, чтобы сузить набор элементов, с которыми совпадёт селектор компонента. Например, селектор атрибута [dropzone] можно ограничить так, чтобы он не совпадал с элементами textarea:

1
2
3
4
5
@Component({
  selector: '[dropzone]:not(textarea)',
  ...
})
export class DropZone { }

Другие псевдоклассы и псевдоэлементы в селекторах компонентов не поддерживаются.

Сочетание селекторов

Несколько селекторов можно склеить в один. Например, так совпадут элементы <button> с type="reset":

1
2
3
4
5
@Component({
  selector: 'button[type="reset"]',
  ...
})
export class ResetButton { }

Можно перечислить несколько селекторов через запятую:

1
2
3
4
5
@Component({
  selector: 'drop-zone, [dropzone]',
  ...
})
export class DropZone { }

Angular создаёт компонент для каждого элемента, который совпал с любым селектором из списка.

Выбор селектора

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

Как использовать нативные пользовательские элементы в шаблонах Angular, описано в Расширенная настройка компонента.

Префиксы селекторов

Команда Angular советует короткий общий префикс для всех пользовательских компонентов проекта. Если бы YouTube писали на Angular, компоненты могли бы начинаться с yt-: yt-menu, yt-player и так далее. По такому префиксу сразу видно, откуда компонент. Angular CLI по умолчанию ставит app-.

Angular использует префикс селектора ng для собственных API фреймворка. Не берите ng как префикс селекторов своих компонентов.

Когда нужен селектор атрибута

Селектор атрибута уместен, когда компонент нужно повесить на обычный нативный элемент. Например, свою кнопку можно построить поверх стандартного <button>:

1
2
3
4
5
@Component({
  selector: 'button[yt-upload]',
   ...
})
export class YouTubeUploadButton { }

Тот, кто использует компонент, сразу получает стандартные API элемента, без дополнительной обвязки. Это особенно важно для атрибутов ARIA, например aria-label.

Angular не сообщает об ошибке, если пользовательский атрибут не совпал ни с одним доступным компонентом. С селектором атрибута легко забыть импортировать компонент или его NgModule, и тогда компонент просто не отрисуется. Подробнее в разделе Импорт и использование компонентов.

У компонентов с селектором атрибута атрибуты пишут в нижнем регистре через дефис. Префикс берут по той же рекомендации, что и выше.

Источник: https://angular.dev/guide/components/selectors

Комментарии