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

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?

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

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).

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

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

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

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.

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

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