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, HostBinding
zaktualizuje 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
role
właściwość - zadeklarowaną za pomocą @HostBinding
- z elementem hosta
- Przypomnij sobie, że
role
jest 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
onClick
zdarzenia zadeklarowanego za pomocą @HostListener
, dołączonego do elementu hosta komponentu, zmieniającego role
się 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()"
HostBinding
iHostListener
są napisane w dyrektywach i innych(...)
oraz[..]
są napisane wewnątrz szablonów (komponentów).źródło
@HostListener
jest drogą do zrobienia, gdy nie masz nic na DOM dla typowego powiązania zdarzeń, takich jak wejście z klawiatury w moim przypadku.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" ; } }
źródło
Kolejną fajną rzeczą
@HostBinding
jest to, że możesz to połączyć z,@Input
jeśli twoje powiązanie opiera się bezpośrednio na wejściu, np:źródło
@Input()
?@HostBinding
. Kiedy potrzebujesz użyć@Input
?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 ...
Działa, ponieważ jest
get
akcesorium . Nie możesz użyć odpowiednika funkcji:W przeciwnym razie zaletą używania
@HostBinding
jest zapewnienie wykrywania zmian, gdy zmienia się wartość powiązana.źródło
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:
W powyższym przykładzie zachodzi następująca sytuacja:
color
Nieruchomość w naszejAppComponent
klasie jest związany zstyle.color
posesji na komponencie. Więc gdycolor
właściwość jest aktualizowana, tak samo będziestyle.color
właściwością naszego komponentuWykorzystanie w
@Directive
:Chociaż może być używany na komponencie, te dekoratory są często używane w dyrektywach atrybutów. Użycie w
@Directive
hoście zmienia element, w którym znajduje się dyrektywa. Na przykład spójrz na ten szablon komponentu:Tutaj p_Dir jest dyrektywą dotyczącą
<p>
elementu. Gdy@HostBinding
lub@HostListener
jest używane w klasie dyrektywy, host będzie teraz odwoływał się do<p>
.źródło
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
źródło