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

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

@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }

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

@Component({
  template: `
    <profile-photo />
    <button>Upload a new profile photo</button>`,
  ...,
})
export class UserProfile { }

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

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

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

Типы селекторов

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

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

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

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

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

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

@Component({
  selector: '[dropzone]:not(textarea)',
  ...
})
export class DropZone { }

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

Комбинирование селекторов

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

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

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

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

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

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

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

См. Расширенная конфигурация компонентов для получения подробной информации об использовании нативных пользовательских элементов в шаблонах Angular.

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

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

Когда использовать селектор по атрибуту

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

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

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

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

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