@HostBinding i @HostListener: co robią i do czego służą?

W moich wędrówkach po całym świecie, a teraz zwłaszcza w dokumentach w stylu angular.io , znajduję wiele odniesień do @HostBindingi @HostListener. Wydaje się, że są one dość fundamentalne, ale niestety dokumentacja do nich w tej chwili jest trochę szkicowa.

Czy ktoś może wyjaśnić, czym one są, jak działają i podać przykład ich użycia?

Sprawdziłeś te oficjalne dokumenty?

HostListener - deklaruje odbiornik hosta. Angular wywoła dekorowaną metodę, gdy element hosta wyemituje określone zdarzenie.

@HostListener- nasłuchuje zdarzenia emitowanego przez element hosta zadeklarowany za pomocą @HostListener.

HostBinding - deklaruje powiązanie właściwości hosta. Angular automatycznie sprawdza powiązania właściwości hosta podczas wykrywania zmian. Jeśli powiązanie ulegnie zmianie, zaktualizuje element hosta dyrektywy.

@HostBinding- powiąże właściwość z elementem hosta, jeśli powiązanie ulegnie zmianie, HostBindingzaktualizuje element hosta.

UWAGA: Oba łącza zostały niedawno usunięte. Część przewodnika stylów „ HostBinding-HostListening ” może być użyteczną alternatywą do czasu powrotu linków.

Oto prosty przykład kodu, który pomaga zobrazować, co to oznacza:

DEMO: Oto demo na żywo w plunkerze - „Prosty przykład o @HostListener i @HostBinding”

• Ten przykład wiąże rolewłaściwość - zadeklarowaną za pomocą @HostBinding- z elementem hosta
  • Przypomnij sobie, że rolejest to atrybut, ponieważ używamy attr.role.
  • <p myDir>staje się, <p mydir="" role="admin">gdy przeglądasz go w narzędziach programistycznych.
• Następnie nasłuchuje onClickzdarzenia zadeklarowanego za pomocą @HostListener, dołączonego do elementu hosta komponentu, zmieniającego rolesię po każdym kliknięciu.
  • Zmiana po <p myDir>kliknięciu polega na tym, że jego otwierający znacznik zmienia się z <p mydir="" role="admin">na <p mydir="" role="guest">iz powrotem.

dyrektywy.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 {}

Szybka wskazówka, która pomaga mi zapamiętać, co robią -

HostBinding('value') myValue; jest dokładnie taki sam jak [value]="myValue"

I

HostListener('click') myClick(){ } jest dokładnie taki sam jak (click)="myClick()"

HostBindingi HostListenersą napisane w dyrektywach i innych (...)oraz [..]są napisane wewnątrz szablonów (komponentów).

Oto podstawowy przykład najechania kursorem.

Właściwość szablonu komponentu:

Szablon

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

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

I nasza dyrektywa

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

Kolejną fajną rzeczą @HostBindingjest to, że możesz to połączyć z, @Inputjeśli twoje powiązanie opiera się bezpośrednio na wejściu, np:

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

Jedną rzeczą, która wprowadza zamieszanie w tym temacie, jest to, że idea dekoratorów nie jest zbyt jasna, a kiedy rozważamy coś takiego ...

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

Działa, ponieważ jest getakcesorium . Nie możesz użyć odpowiednika funkcji:

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

W przeciwnym razie zaletą używania @HostBindingjest zapewnienie wykrywania zmian, gdy zmienia się wartość powiązana.

Podsumowanie:

• @HostBinding: Ten dekorator wiąże właściwość klasy z właściwością elementu hosta.
• @HostListener: Ten dekorator wiąże metodę klasy ze zdarzeniem elementu hosta.

Przykład:

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

}

W powyższym przykładzie zachodzi następująca sytuacja:

• Do zdarzenia kliknięcia dodawany jest detektor zdarzeń, który będzie uruchamiany, gdy zdarzenie kliknięcia wystąpi w dowolnym miejscu w komponencie
• colorNieruchomość w naszej AppComponentklasie jest związany z style.colorposesji na komponencie. Więc gdy colorwłaściwość jest aktualizowana, tak samo będziestyle.color właściwością naszego komponentu
• W rezultacie za każdym razem, gdy ktoś kliknie komponent, kolor zostanie zaktualizowany.

Wykorzystanie w @Directive:

Chociaż może być używany na komponencie, te dekoratory są często używane w dyrektywach atrybutów. Użycie w @Directivehoście zmienia element, w którym znajduje się dyrektywa. Na przykład spójrz na ten szablon komponentu:

<p p_Dir>some paragraph</p>

Tutaj p_Dir jest dyrektywą dotyczącą <p>elementu. Gdy @HostBindinglub @HostListenerjest używane w klasie dyrektywy, host będzie teraz odwoływał się do <p>.

Teoria z mniejszą liczbą żargonów

@Hostlistnening zajmuje się w zasadzie z elementem hosta, powiedzmy (przycisk), słuchając akcji użytkownika i wykonując określoną funkcję powiedz alert („Ahoy!”), Podczas gdy @Hostbinding jest odwrotnie. Tutaj słuchamy zmian, które zaszły na tym przycisku wewnętrznie (powiedz, kiedy został kliknięty, co stało się z klasą) i używamy tej zmiany, aby zrobić coś innego, na przykład wyemitować określony kolor.

Przykład

Pomyśl o scenariuszu, w którym chciałbyś stworzyć ulubioną ikonę na komponencie, teraz wiesz, że musisz wiedzieć, czy przedmiot został dodany do ulubionych ze zmienioną klasą, potrzebujemy sposobu, aby to ustalić. Właśnie w tym miejscu pojawia się @Hostbinding.

A tam, gdzie trzeba wiedzieć, jaka akcja została faktycznie wykonana przez użytkownika, właśnie wtedy pojawia się @Hostlistening