@HostBinding та @HostListener: що вони роблять і для чого вони?

У моїх переходах по всьому світу переплетені, а зараз особливо в документах у стилі angular.io , я знаходжу багато посилань на @HostBindingта @HostListener. Здається, вони є досить фундаментальними, але, на жаль, документація для них наразі є трохи схематичною.

Чи можете будь-хто пояснити, будь ласка, що вони таке, як вони працюють і навести приклад їх використання?

Ви перевірили ці офіційні документи?

HostListener - оголошує хост-слухача. Кутовий буде викликати оформлений метод, коли елемент хосту випромінює вказану подію.

@HostListener- прослухає подію, яку випромінює елемент хосту, який оголошено за допомогою @HostListener.

HostBinding - оголошує прив'язку властивості хоста. Кутовий автоматично перевіряє прив'язки властивостей хоста під час виявлення змін. Якщо прив'язка зміниться, вона оновить головний елемент директиви.

@HostBinding- прив'яже властивість до хост-елемента, якщо прив'язка зміниться, HostBindingоновить хост-елемент.

ПРИМІТКА . Нещодавно видалено обидва посилання. Частина « HostBinding-HostListening » у посібнику зі стилів може бути корисною альтернативою до повернення посилань.

Ось простий приклад коду, який допоможе уявити, що це означає:

DEMO: Ось демонстрація в ефірі в планку - "Простий приклад про @HostListener & @HostBinding"

• Цей приклад пов'язує roleвластивість - оголошене з @HostBinding- елементом хоста
  • Нагадаємо, що roleце атрибут, оскільки ми використовуємо attr.role.
  • <p myDir>стає, <p mydir="" role="admin">коли ви переглядаєте його в інструментах для розробників.
• Потім він прослуховує onClickподію, оголошену разом із @HostListenerприєднаним до хост-елемента компонента, змінюючи roleкожне клацання.
  • Зміна при <p myDir>натисканні на кнопку полягає в тому, що її початковий тег змінюється <p mydir="" role="admin">на " <p mydir="" role="guest">назад" і "назад".

директив.ц

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

Швидкий рада, який допомагає мені запам'ятати, що вони роблять -

HostBinding('value') myValue; точно так само, як [value]="myValue"

І

HostListener('click') myClick(){ } точно так само, як (click)="myClick()"

HostBindingі HostListenerвони записані в директивах та інших (...)і [..]записуються всередині шаблонів (компонентів).

Ось основний приклад наведення.

Властивість шаблону компонента:

Шаблон

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

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

І наша директива

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

Ще одна приємна річ у @HostBindingтому, що ви можете комбінувати його, @Inputякщо прив'язка покладається безпосередньо на вхід, наприклад:

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

Одне, що додає плутанини цій темі, - ідея декораторів не дуже зрозуміла, і коли ми розглядаємо щось на зразок ...

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

Це працює, тому що є getаксесуаром . Ви не можете використовувати еквівалент функції:

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

В іншому випадку перевагою використання @HostBindingє те, що він забезпечує виявлення змін, коли запускається змінене значення.

Підсумок:

• @HostBinding: Цей декоратор прив'язує властивість класу до властивості елемента хосту.
• @HostListener: Цей декоратор прив'язує метод класу до події хост-елемента.

Приклад:

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

}

У наведеному вище прикладі відбувається наступне:

• Слухач події додається до події клацання, яка буде запущена, коли подія клацання відбудеться в будь-якому місці компонента
• colorВластивість в нашому AppComponentкласі прив'язується до style.colorвласності на компоненті. Тому щоразу, коли colorвластивість оновлюється, так само будеstyle.color властивість нашого компонента
• Результатом буде те, що кожен раз, коли хтось натискає на компонент, колір буде оновлюватися.

Використання в @Directive:

Хоча його можна використовувати на компонентах, ці декоратори часто використовуються в директивах щодо атрибутів. При використанні в @Directiveхості змінюється елемент, на який розміщена директива. Наприклад, подивіться на цей компонентний шаблон:

<p p_Dir>some paragraph</p>

Тут p_Dir - це директива щодо <p>елемента. Коли @HostBindingабо @HostListenerвикористовується в класі директиви, хост тепер буде посилатися на <p>.

Теорія з меншими жаргонами

@Hostlistnening в основному стосується елемента хост-елемента (кнопка) прослуховування дії користувача і виконання попередження про певну функцію ("Ahoy!"), А @Hostbinding - навпаки. Тут ми прослуховуємо зміни, які відбулися на цій кнопці всередині (Скажімо, коли було натиснено, що сталося з класом), і ми використовуємо цю зміну, щоб зробити щось інше, скажімо, виділити певний колір.

Приклад

Подумайте про сценарій, за яким ви хотіли б зробити улюблену піктограму на компоненті, тепер ви знаєте, що вам слід було б знати, чи змінився елемент у вибраному, якщо його клас змінився, нам потрібен спосіб це визначити. Саме там заходить @Hostbinding.

І де є потреба знати, яку дію насправді здійснив користувач, куди потрапляє @Hostlistening