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

в моих блужданиях по всемирной паутине, а теперь особенно угловой.IO style docs, Я нахожу много ссылок на @HostBinding и @HostListener. Кажется, они довольно фундаментальны, но, к сожалению, документация для них на данный момент немного отрывочна.

может ли кто-нибудь объяснить, что они такое, как они работают и привести пример их использования?

135
angular angular-services

6 ответов

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

HostListener - объявляет ведущий слушатель.Angular вызовет метод decorated, когда элемент host испускает указанное событие.
# HostListener - будет прослушивать событие, испускаемое элементом host, объявленным с помощью @HostListener.

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

Примечание: обе ссылки были удалены недавно.Поэтому, пожалуйста, попытайтесь понять это из HostBinding-HostListening поскольку пока нет надлежащей документации.

я постарался сделать простой пример для лучшего понимание,

демо : Проверьте ниже пример live in plunker-простой пример о @HostListener & @HostBinding

этот пример связывает role property объявлена с @HostBinding to host element<p> и слушает click event объявлена с @HostListener на host element <p>

директивы.ТС

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.ТС

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

@Component({
selector: 'my-app',
template:
  `
  <p myDir>Host Element 
  <br><br>
  I'm(HostListener) listening to host's <b>click event</b> declared with @HostListener

  <br><br>
  I'm(HostBinding) binding <b>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> Open DOM of host element, click host element(in UI) and check role attribute(in DOM) </div> 
    `,
  directives: [HostDirective]
})
export class AppComponent {}
101

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

HostBinding('value') myValue; Это то же самое, что [value]="myValue"

и

HostListener('click') myClick(){ } точно так же, как (click)="myClick()"

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

60

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

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

шаблон

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

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

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

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

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

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

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

в противном случае, выгода от использования @HostBinding это гарантирует, что обнаружение изменений выполняется при изменении связанного значения.

7

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

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

пример

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

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

5