Хост-элементы компонентов

Angular создаёт экземпляр компонента для каждого HTML-элемента, соответствующего селектору компонента. DOM-элемент, соответствующий селектору компонента, является хост-элементом этого компонента. Содержимое шаблона компонента отображается внутри его хост-элемента.

// Component source
@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
})
export class ProfilePhoto {}

<!-- Using the component -->
<h3>Your profile photo</h3>
<profile-photo />
<button>Upload a new profile photo</button>

<!-- Rendered DOM -->
<h3>Your profile photo</h3>
<profile-photo>
  <img src="profile-photo.jpg" alt="Your profile photo" />
</profile-photo>
<button>Upload a new profile photo</button>

В приведённом выше примере <profile-photo> — это хост-элемент компонента ProfilePhoto.

Привязка к хост-элементу

Компонент может привязывать свойства, атрибуты, стили и события к своему хост-элементу. Это работает так же, как привязки к элементам внутри шаблона компонента, но задаётся с помощью свойства host в декораторе @Component:

@Component({
  ...,
  host: {
    'role': 'slider',
    '[attr.aria-valuenow]': 'value',
    '[class.active]': 'isActive()',
    '[style.background]' : `hasError() ? 'red' : 'green'`,
    '[tabIndex]': 'disabled ? -1 : 0',
    '(keydown)': 'updateValue($event)',
  },
})
export class CustomSlider {
  value: number = 0;
  disabled: boolean = false;
  isActive = signal(false);
  hasError = signal(false);
  updateValue(event: KeyboardEvent) { /* ... */ }

  /* ... */
}

Декораторы @HostBinding и @HostListener

Также можно привязываться к хост-элементу, применив декораторы @HostBinding и @HostListener к членам класса.

@HostBinding позволяет привязывать свойства и атрибуты хоста к свойствам и геттерам:

@Component({
  /* ... */
})
export class CustomSlider {
  @HostBinding('attr.aria-valuenow')
  value: number = 0;

  @HostBinding('tabIndex')
  get tabIndex() {
    return this.disabled ? -1 : 0;
  }

  /* ... */
}

@HostListener позволяет привязывать обработчики событий к хост-элементу. Декоратор принимает имя события и необязательный массив аргументов:

export class CustomSlider {
  @HostListener('keydown', ['$event'])
  updateValue(event: KeyboardEvent) {
    /* ... */
  }
}

Конфликты привязок

При использовании компонента в шаблоне можно добавлять привязки к элементу экземпляра этого компонента. Компонент также может определять привязки хоста для тех же свойств или атрибутов.

@Component({
  ...,
  host: {
    'role': 'presentation',
    '[id]': 'id',
  }
})
export class ProfilePhoto { /* ... */ }

<profile-photo role="group" [id]="otherId" />

В подобных случаях приоритет значений определяется следующими правилами:

• Если оба значения статические, приоритет имеет привязка экземпляра.
• Если одно значение статическое, а другое динамическое, приоритет имеет динамическое значение.
• Если оба значения динамические, приоритет имеет привязка хоста компонента.

Стилизация с помощью пользовательских свойств CSS

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

@Component({
  /* ... */
  host: {
    '[style.--my-background]': 'color()',
  },
})
export class MyComponent {
  color = signal('lightgreen');
}

В этом примере пользовательское свойство CSS --my-background привязано к сигналу color. Значение пользовательского свойства будет автоматически обновляться при каждом изменении сигнала color. Это повлияет на текущий компонент и все его дочерние компоненты, которые используют это пользовательское свойство.

Задание пользовательских свойств для дочерних компонентов

Также пользовательские свойства CSS можно задать для хост-элемента дочерних компонентов с помощью привязки стиля.

@Component({
  selector: 'my-component',
  template: `<my-child [style.--my-background]="color()" />`,
})
export class MyComponent {
  color = signal('lightgreen');
}

Внедрение атрибутов хост-элемента

Компоненты и директивы могут считывать статические атрибуты своего хост-элемента с помощью HostAttributeToken и функции inject.

import { Component, HostAttributeToken, inject } from '@angular/core';

@Component({
  selector: 'app-button',
  ...,
})
export class Button {
  variation = inject(new HostAttributeToken('variation'));
}

<app-button variation="primary">Click me</app-button>