@HostBinding ve @HostListener: ne yapıyorlar ve ne işe yarıyorlar?

Dünya genelindeki kıvrımlarımda ve şimdi özellikle açısal.io tarzı dokümanlarda , @HostBindingve için birçok referans buluyorum @HostListener. Görünüşe göre oldukça temel, ama ne yazık ki şu anda onlar için belgeler biraz kabataslak.

Herkes ne olduklarını, nasıl çalıştıklarını açıklayabilir ve kullanımlarına bir örnek verebilir mi?

Bu resmi belgeleri kontrol ettiniz mi?

HostListener - Bir ana bilgisayar dinleyicisi bildirir. Açısal, ana makine öğesi belirtilen olayı yayınladığında dekore edilmiş yöntemi çağırır.

@HostListener- beyan edilen ana makine öğesinin yaydığı etkinliği dinler @HostListener.

HostBinding - Bir host özelliği bağlama bildirir. Açısal, değişiklik algılama sırasında ana bilgisayar özellik bağlarını otomatik olarak kontrol eder. Bağlama değişirse, direktifin ana bilgisayar öğesini güncelleyecektir.

@HostBinding- özelliği anasistem öğesine bağlar, Bağlama değişirse HostBindinganasistem öğesini günceller.

NOT: Her iki bağlantı da yakın zamanda kaldırıldı. "Stil kılavuzunun HostBinding-HostListening " kısmı bağlantılar dönene kadar yararlı bir alternatif olabilir.

Bunun ne anlama geldiğini resmetmenize yardımcı olacak basit bir kod örneği:

DEMO: Demo dalgıç canlı - "@HostListener & @HostBinding hakkında basit bir örnek"

• Bu örnek bir role ile bildirilen özelliği @HostBindingana bilgisayarın öğesine
  • Hatırlıyorum role, çünkü bu bir özellikattr.role .
  • <p myDir><p mydir="" role="admin">geliştirici araçlarında görüntülediğinizde olur .
• Daha sonra onClickile bildirilen olayı dinler@HostListenerrole her tıklamayla değişen, bileşenin ana bilgisayar öğesine bağlı olarak .
  • Değişiklik <p myDir>tıklandığında açılış etiketi gelen değiştirmesidir <p mydir="" role="admin">için <p mydir="" role="guest">ve geri.

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

Ne yaptıklarını hatırlamama yardımcı olan hızlı bir ipucu -

HostBinding('value') myValue; tam olarak aynı [value]="myValue"

Ve

HostListener('click') myClick(){ } tam olarak aynı (click)="myClick()"

HostBindingve HostListenerdirektiflerde ve diğerlerinde yazılır (...)ve [..]şablonların (bileşenlerin) içinde yazılır.

İşte temel bir fareyle üzerine gelme örneği.

Bileşenin şablon özelliği:

şablon

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

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

Ve direktifimiz

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

Güzel bir şey hakkında @HostBindingBunu, birleştirmek olmasıdır @Inputsenin bağlayıcı bir girdi, örneğin doğrudan bağlıysa:

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

Bu konuya karışıklık katan bir şey, dekoratörler fikrinin çok net olmadığı ve böyle bir şey düşündüğümüzde ...

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

Çalışıyor, çünkü bir geterişimci . Eşdeğer bir işlev kullanamazsınız:

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

Aksi takdirde, kullanmanın yararı @HostBinding, bağlı değer değiştiğinde değişiklik algılamanın çalıştırılmasını sağlamasıdır .

Özet:

• @HostBinding: Bu dekoratör, bir sınıf özelliğini ana bilgisayar öğesinin bir özelliğine bağlar .
• @HostListener: Bu dekoratör , ana bilgisayar öğesinin bir olayına bir sınıf yöntemi bağlar .

Misal:

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

}

Yukarıdaki örnekte aşağıdakiler gerçekleşir:

• Tıklama etkinliğine, bileşenin herhangi bir yerinde bir tıklama etkinliği gerçekleştiğinde tetiklenecek bir etkinlik dinleyicisi eklenir
• colorBizim mülkiyet AppComponentsınıfına bağlı olduğu style.colorbileşende özelliği. Böylece colorözellik her güncellendiğindestyle.color , bileşenimizin mülkü de
• Sonuçta, bir kişi bileşeni her tıkladığında renk güncellenecektir.

Kullanımı @Directive:

Bileşen üzerinde kullanılabilmesine rağmen, bu dekoratörler genellikle öznitelik yönergelerinde kullanılır. Bir @Directiveana bilgisayarda kullanıldığında , direktifin yerleştirildiği öğeyi değiştirir. Örneğin, bu bileşen şablonuna bir göz atın:

<p p_Dir>some paragraph</p>

Burada p_Dir <p>eleman üzerine bir direktiftir . Ne zaman @HostBindingya da @HostListenerdirektif sınıf içinde kullanılan konak şimdi sevk edecektir <p>.

Daha az Jargan ile teori

@Hostlistnening, temel olarak bir kullanıcı tarafından bir eylemi dinlemek ve belirli bir işlevi yerine getirmek için ana bilgisayar öğesi (ahoy! ") İle ilgilenir. @Hostbinding ise diğer yöndedir. Burada dahili olarak o düğmede meydana gelen değişiklikleri dinleriz (Sınıfa ne zaman tıklandığını söyle) ve bu değişikliği başka bir şey yapmak için kullanırız, belirli bir renk yayarız.

Misal

Bir bileşende favori simgesi yapmak istediğiniz senaryoyu düşünün, şimdi öğenin sınıfı ile Sık Kullanılana göre değiştirilip değiştirilmediğini bilmek zorunda olduğunuzu biliyorsunuz, bunu belirlemek için bir yolumuz var. Tam olarak @Hostbinding devreye giriyor.

Ve @Hostlistening'in devreye girdiği kullanıcı tarafından gerçekte hangi eylemin gerçekleştirildiğini bilmek gerektiğinde