@HostBinding dan @HostListener: apa yang mereka lakukan dan untuk apa mereka?

188

Dalam berliku-liku saya di seluruh dunia terjalin, dan sekarang terutama dokumen gaya angular.io , saya menemukan banyak referensi untuk @HostBindingdan @HostListener. Sepertinya mereka cukup mendasar, tetapi sayangnya dokumentasi untuk mereka saat ini agak samar.

Adakah yang bisa menjelaskan apa mereka, bagaimana mereka bekerja dan memberikan contoh penggunaannya?

serlingpa
sumber

Jawaban:

139

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, HostBindingakan 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 roleproperti - dideklarasikan dengan @HostBinding- ke elemen host
    • Ingat itu roleadalah atribut, karena kami menggunakan attr.role.
    • <p myDir>menjadi <p mydir="" role="admin">ketika Anda melihatnya di alat pengembang.
  • Kemudian mendengarkan onClickacara yang dideklarasikan dengan @HostListener, dilampirkan ke elemen host komponen, berubah rolesetiap 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 {}
mikronik
sumber
1
apakah dekorator ini masih digunakan sepertinya tautannya telah dihapus dari dokumentasi
angular2
1
Ya, ini masih digunakan tetapi biarkan saya mengkonfirmasinya sekali. Saya akan memperbarui Anda, jika saya dapat menemukan sesuatu yang lain.
micronyks
Mereka ada di lembar contekan: angular.io/docs/ts/latest/guide/cheatsheet.html
Targaryen
1
@ Mr.EasyAnswersMcFly memperbarui jawaban dengan catatan dan tautan. Harap dicatat bahwa dokumentasi yang tepat belum tersedia.
micronyks
1
@MuhammadSaleh untuk scroll sulit untuk mengatakan bahwa bagaimana menghitung dan menghitung ... tapi itu pasti bahwa setiap instance akan memiliki pendengar yang terpisah
micronyks
112

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()"


HostBindingdan HostListenerditulis dalam arahan dan yang lainnya (...)dan [..]ditulis di dalam templat (komponen).

Shai Reznik - HiRez.io
sumber
9
Ah, itu diklik (pun intended) dengan saya berkat jawaban ini. @HostListeneradalah cara untuk pergi ketika Anda tidak memiliki apa pun di DOM untuk pengikatan acara biasa, seperti input keyboard dalam kasus saya.
MrBoJangles
47

Berikut adalah contoh hover dasar.

Properti template komponen:

Templat

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

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

Dan arahan kami

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" ;
  } 
}
serkan
sumber
28
Saya tidak melihat jawaban yang diterima ini sebagai jawaban untuk pertanyaan yang diajukan. Maukah Anda memberikan penjelasan? Seperti apa yang c_colorrr, c_onEnterrr (), c_onLeaveeee lakukan dalam cuplikan kode khusus ini?
luqo33
1
Saya pikir itu harus berubah warna pada mouse masukkan acara ke biru dan pada acara cuti mouse menjadi kuning.
Michał Ziobro
Di mana Anda menempatkan arahan di markup? Tampaknya Anda akan meletakkannya di tag body, tetapi itu akan berada di luar komponen root. Jika Anda bingung dengan jawaban ini, tautan ini mungkin membantu ng2.codecraft.tv/custom-directives/hostlistener-and-hostbinding
mtpultz
@ mtpultz Ada di kelas.
serkan
33

Hal baik lainnya @HostBindingadalah Anda dapat menggabungkannya dengan @Inputjika ikatan Anda bergantung langsung pada input, misalnya:

@HostBinding('class.fixed-thing')
@Input()
fixed: boolean;
altschuler
sumber
1
Bisakah Anda berbagi contoh penggunaan dengan @Input()?
Mano
Contohnya ada di sana dalam jawaban saya, Anda cukup menulis kedua dekorator satu demi satu, pesanan harus tidak relevan
altschuler
1
Saya pikir apa yang saya lewatkan adalah bagaimana ini berbeda dari hanya menggunakan @HostBinding. Kapan Anda perlu menggunakan @Input?
1252748
11

Satu hal yang menambah kebingungan pada subjek ini adalah ide dekorator tidak dibuat sangat jelas, dan ketika kita mempertimbangkan sesuatu seperti ...

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

Berhasil, karena itu adalah getaccessor . Anda tidak dapat menggunakan fungsi yang setara:

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

Jika tidak, manfaat penggunaannya @HostBindingadalah memastikan deteksi perubahan dijalankan ketika nilai terikat berubah.

Selesai
sumber
9

Ringkasan:

  • @HostBinding: Dekorator ini mengikat properti kelas ke properti elemen host.
  • @HostListener: Dekorator ini mengikat metode kelas ke acara elemen host.

Contoh:

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

}

Dalam contoh di atas terjadi hal berikut:

  • Seorang pendengar peristiwa ditambahkan ke acara klik yang akan dipecat ketika peristiwa klik terjadi di mana saja dalam komponen
  • The colorproperti di kami AppComponentkelas terikat ke style.colorproperti pada komponen. Jadi, kapan pun colorproperti diperbarui, demikian juga style.colorproperti komponen kami
  • Hasilnya adalah setiap kali seseorang mengklik komponen, warna akan diperbarui.

Penggunaan dalam @Directive:

Meskipun dapat digunakan pada komponen dekorator ini sering digunakan dalam arahan atribut. Ketika digunakan dalam suatu @Directivehost, perubahan elemen tempat arahan ditempatkan. Sebagai contoh, lihat template komponen ini:

<p p_Dir>some paragraph</p>

Di sini p_Dir adalah arahan pada <p>elemen. Kapan @HostBindingatau @HostListenerdigunakan dalam kelas direktif host sekarang akan merujuk ke <p>.

Willem van der Veen
sumber
6

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

Ralphkay
sumber
3
Ini membingungkan, dan nama dekoratornya tidak akurat.
matmancini