@HostBinding и @HostListener: что они делают и для чего?

Вы проверили эти официальные документы?

HostListener - объявляет слушателя хоста. Angular вызовет декорированный метод, когда элемент хоста испускает указанное событие.

@HostListener - будет прослушивать событие, генерируемое элементом хоста, объявленным с помощью @HostListener.

HostBinding - объявляет привязку свойства хоста. Angular автоматически проверяет привязки свойств хоста во время обнаружения изменений. Если привязка изменится, она обновит хост-элемент директивы.

@HostBinding - привяжет свойство к элементу хоста. Если привязка изменится, HostBinding обновит элемент хоста.

ПРИМЕЧАНИЕ. Обе ссылки недавно были удалены. Часть руководства по стилю "HostBinding-HostListening" может быть полезная альтернатива, пока ссылки не вернутся.

Вот простой пример кода, который помогает понять, что это означает:

ДЕМО: Вот демонстрация в плункере - «Простой пример о @HostListener и @HostBinding»

• This example binds a role property -- declared with @HostBinding -- to the host's element
  • Recall that role is an attribute, since we're using attr.role.
  • <p myDir> становится <p mydir="" role="admin">, когда вы просматриваете его в инструментах разработчика.
• It then listens to the onClick event declared with @HostListener, attached to the component's host element, changing role with each click.
  • The change when the <p myDir> is clicked is that its opening tag changes from <p mydir="" role="admin"> to <p mydir="" role="guest"> and back.

directives.ts

import {Component,HostListener,Directive,HostBinding,Input} from '@angular/core';

@Directive({selector: '[myDir]'})
export class HostDirective {
  @HostBinding('attr.role') role = 'admin'; 
  @HostListener('click') onClick() {
    this.role= this.role === 'admin' ? 'guest' : 'admin';
  }
}

AppComponent.ts

import { Component,ElementRef,ViewChild } from '@angular/core';
import {HostDirective} from './directives';

@Component({
selector: 'my-app',
template:
  `
  <p myDir>Host Element 
    <br><br>

    We have a (HostListener) listening to this host's <b>click event</b> declared with @HostListener

    <br><br>

    And we have a (HostBinding) binding <b>the role property</b> to host element declared with @HostBinding 
    and checking host's property binding updates.

    If any property change is found I will update it.
  </p>

  <div>View this change in the DOM of the host element by opening developer tools,
    clicking the host element in the UI. 

    The role attribute's changes will be visible in the DOM.</div> 
    `,
  directives: [HostDirective]
})
export class AppComponent {}

Небольшой совет, который помогает мне вспомнить, что они делают -

HostBinding('value') myValue; в точности совпадает с [value]="myValue"

А также

HostListener('click') myClick(){ } в точности совпадает с (click)="myClick()"

HostBinding и HostListener записываются в директивах, а остальные (...) и [..] записываются внутри шаблонов (компонентов).

Вот простой пример наведения.

Свойство шаблона компонента:

Шаблон

<!-- attention, we have the c_highlight class -->
<!-- c_highlight is the selector property value of the directive -->

<p class="c_highlight">
    Some text.
</p>

И наша директива

import {Component,HostListener,Directive,HostBinding} from '@angular/core';

@Directive({
    // this directive will work only if the DOM el has the c_highlight class
    selector: '.c_highlight'
 })
export class HostDirective {

  // we could pass lots of thing to the HostBinding function. 
  // like class.valid or attr.required etc.

  @HostBinding('style.backgroundColor') c_colorrr = "red"; 

  @HostListener('mouseenter') c_onEnterrr() {
   this.c_colorrr= "blue" ;
  }

  @HostListener('mouseleave') c_onLeaveee() {
   this.c_colorrr = "yellow" ;
  } 
}

Еще одна приятная особенность @HostBinding заключается в том, что вы можете комбинировать его с @Input, если ваша привязка напрямую зависит от ввода, например:

@HostBinding('class.fixed-thing')
@Input()
fixed: boolean;

Резюме:

• @HostBinding: этот декоратор связывает свойство класса со свойством ведущего элемента.
• @HostListener: этот декоратор связывает метод класса с событием элемента хоста.

Пример:

import { Component, HostListener, HostBinding } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<p>This is nice text<p>`,
})
export class AppComponent  {

  @HostBinding('style.color') color; 

  @HostListener('click')
  onclick() {
    this.color =  'blue';
  }

}

В приведенном выше примере происходит следующее:

• К событию щелчка добавляется прослушиватель событий, который запускается, когда событие щелчка происходит в любом месте компонента.
• Свойство color в нашем классе AppComponent привязано к свойству style.color компонента. Поэтому всякий раз, когда свойство color обновляется, свойство style.color нашего компонента
• В результате всякий раз, когда кто-то щелкает по компоненту, цвет будет обновляться.

Использование в @Directive:

Хотя их можно использовать в компонентах, эти декораторы часто используются в директивах атрибутов. При использовании в @Directive хост изменяет элемент, на котором размещена директива. Например, взгляните на этот шаблон компонента:

<p p_Dir>some paragraph</p>

Здесь p_Dir - это директива для элемента <p>. Когда @HostBinding или @HostListener используется в классе директивы, хост теперь будет ссылаться на <p>.

Одна вещь, которая добавляет путаницы в этот предмет, - это то, что идея декораторов не очень ясна, и когда мы рассматриваем что-то вроде ...

@HostBinding('attr.something') 
get something() { 
    return this.somethingElse; 
 }

Это работает, потому что это get аксессор. Вы не могли использовать эквивалент функции:

@HostBinding('attr.something') 
something() { 
    return this.somethingElse; 
 }

В противном случае преимущество использования @HostBinding заключается в том, что он гарантирует, что обнаружение изменений запускается при изменении связанного значения.

Теория без жаргона

@Hostlistnening в основном имеет дело с элементом хоста say (кнопка), который слушает действие пользователя и выполняет определенную функцию say alert («Эй!»), А @Hostbinding - наоборот. Здесь мы слушаем изменения, которые произошли на этой кнопке внутри (скажем, когда она была нажата, что произошло с классом), и мы используем это изменение, чтобы сделать что-то еще, например, испустить определенный цвет.

Пример

Подумайте о сценарии, в котором вы хотели бы сделать значок избранного для компонента, теперь вы знаете, что вам нужно знать, был ли элемент добавлен в избранное с измененным его классом, нам нужен способ определить это. Именно здесь на помощь приходит @Hostbinding.

И где нужно знать, какое действие на самом деле было выполнено пользователем, именно здесь появляется @Hostlistening.

МЕТОД ДЕКОРАТОРА:

@HostBinding: динамическая привязка настраиваемой логики к элементу Host

 @HostBinding('class.active')
 activeClass = false;

@HostListen: для прослушивания событий на элементе Host

@HostListener('click')
 activeFunction(){
    this.activeClass = !this.activeClass;
 }

Хост-элемент:

  <button type='button' class="btn btn-primary btn-sm" appHost>Host</button>