Sudahkah Anda memeriksa dokumen resmi ini?
HostListener - Mendeklarasikan pendengar host. Angular akan memanggil metode yang didekorasi ketika elemen host memancarkan acara yang ditentukan.
@HostListener
- akan mendengarkan acara yang dipancarkan oleh elemen host yang dideklarasikan bersama @HostListener
.
HostBinding - Mengumumkan pengikatan properti host. Angular secara otomatis memeriksa binding properti host selama deteksi perubahan. Jika perubahan mengikat, itu akan memperbarui elemen host dari arahan.
@HostBinding
- akan mengikat properti ke elemen host, Jika mengikat berubah, HostBinding
akan memperbarui elemen host.
CATATAN: Kedua tautan telah dihapus baru-baru ini. Bagian " HostBinding-HostListening " dari panduan gaya dapat menjadi alternatif yang berguna sampai tautan kembali.
Berikut adalah contoh kode sederhana untuk membantu menggambarkan apa artinya ini:
DEMO: Ini demo live di plunker - "Contoh sederhana tentang @HostListener & @HostBinding"
- Contoh ini mengikat
role
properti - dideklarasikan dengan @HostBinding
- ke elemen host
- Ingat itu
role
adalah atribut, karena kami menggunakan attr.role
.
<p myDir>
menjadi <p mydir="" role="admin">
ketika Anda melihatnya di alat pengembang.
- Kemudian mendengarkan
onClick
acara yang dideklarasikan dengan @HostListener
, dilampirkan ke elemen host komponen, berubah role
setiap klik.
- Perubahan ketika
<p myDir>
diklik adalah bahwa tag pembukaan berubah dari <p mydir="" role="admin">
ke <p mydir="" role="guest">
dan kembali.
arahan.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 {}
Kiat kilat yang membantu saya mengingat apa yang mereka lakukan -
HostBinding('value') myValue;
persis sama dengan[value]="myValue"
Dan
HostListener('click') myClick(){ }
persis sama dengan(click)="myClick()"
HostBinding
danHostListener
ditulis dalam arahan dan yang lainnya(...)
dan[..]
ditulis di dalam templat (komponen).sumber
@HostListener
adalah cara untuk pergi ketika Anda tidak memiliki apa pun di DOM untuk pengikatan acara biasa, seperti input keyboard dalam kasus saya.Berikut adalah contoh hover dasar.
Properti template komponen:
Templat
Dan arahan kami
sumber
Hal baik lainnya
@HostBinding
adalah Anda dapat menggabungkannya dengan@Input
jika ikatan Anda bergantung langsung pada input, misalnya:sumber
@Input()
?@HostBinding
. Kapan Anda perlu menggunakan@Input
?Satu hal yang menambah kebingungan pada subjek ini adalah ide dekorator tidak dibuat sangat jelas, dan ketika kita mempertimbangkan sesuatu seperti ...
Berhasil, karena itu adalah
get
accessor . Anda tidak dapat menggunakan fungsi yang setara:Jika tidak, manfaat penggunaannya
@HostBinding
adalah memastikan deteksi perubahan dijalankan ketika nilai terikat berubah.sumber
Ringkasan:
@HostBinding
: Dekorator ini mengikat properti kelas ke properti elemen host.@HostListener
: Dekorator ini mengikat metode kelas ke acara elemen host.Contoh:
Dalam contoh di atas terjadi hal berikut:
color
properti di kamiAppComponent
kelas terikat kestyle.color
properti pada komponen. Jadi, kapan puncolor
properti diperbarui, demikian jugastyle.color
properti komponen kamiPenggunaan dalam
@Directive
:Meskipun dapat digunakan pada komponen dekorator ini sering digunakan dalam arahan atribut. Ketika digunakan dalam suatu
@Directive
host, perubahan elemen tempat arahan ditempatkan. Sebagai contoh, lihat template komponen ini:Di sini p_Dir adalah arahan pada
<p>
elemen. Kapan@HostBinding
atau@HostListener
digunakan dalam kelas direktif host sekarang akan merujuk ke<p>
.sumber
Teori dengan Jargon yang lebih sedikit
Penawaran @Hostlistnening pada dasarnya dengan elemen host katakan (tombol) mendengarkan tindakan oleh pengguna dan melakukan fungsi tertentu mengatakan waspada ("Ahoy!") Sedangkan @Hostbinding adalah sebaliknya. Di sini kita mendengarkan perubahan yang terjadi pada tombol itu secara internal (Katakan ketika diklik apa yang terjadi pada kelas) dan kita menggunakan perubahan itu untuk melakukan sesuatu yang lain, katakan memancarkan warna tertentu.
Contoh
Pikirkan skenario bahwa Anda ingin membuat ikon favorit pada suatu komponen, sekarang Anda tahu bahwa Anda harus tahu apakah item telah Difavoritkan dengan kelasnya berubah, kita perlu cara untuk menentukan ini. Di situlah @Hostbinding masuk.
Dan di mana ada kebutuhan untuk mengetahui tindakan apa yang sebenarnya dilakukan oleh pengguna di situlah @Hostlistening masuk
sumber