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

Ответ 1

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

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

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

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

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

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

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

ДЕМО: Здесь демонстрация живет в плункере - "Простой пример @HostListener & @HostBinding"

• В этом примере привязывается свойство role, объявленное с помощью @HostBinding, к элементу хоста.
  • Напомним, что role является атрибутом, поскольку мы используем attr.role.
  • <p myDir> становится <p mydir="" role="admin">, когда вы просматриваете его в инструментах разработчика.
• Затем он прослушивает событие onClick, объявленное с помощью @HostListener, присоединенного к элементу хоста компонента, изменяя role при каждом щелчке.
  • При нажатии <p myDir> изменяется то, что его открывающий тег изменяется с <p mydir="" role="admin"> на <p mydir="" role="guest"> и обратно.

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 <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 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 changes will be visible in the DOM.</div> 
    ',
  directives: [HostDirective]
})
export class AppComponent {}

Ответ 2

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

HostBinding('value') myValue; точно такой же, как [value]="myValue"

и

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

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

Ответ 3

Вот пример базового наведения.

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

Шаблон

<!-- 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" ;
  } 
}

Ответ 4

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

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

Ответ 5

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

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

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

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

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

Ответ 6

Резюме:

• @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';
  }

}

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

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

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

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

<p p_Dir>some paragraph</p>

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

Ответ 7

Теория с меньшим количеством жаргонов

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

Пример

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

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