@HostBinding и @HostListener: что они делают и для чего они предназначены?

в моих блужданиях по всемирной паутине, а теперь особенно angular.io стиль docs, Я нахожу много ссылок на @HostBinding и @HostListener. Кажется, они довольно фундаментальны, но, к сожалению, документация для них на данный момент немного отрывочна.



может ли кто-нибудь объяснить, что это такое, как они работают и привести пример их использования?

759   6  

6 ответов:

вы проверили эти официальные документы?

HostListener - объявляет хозяин слушателя.Angular вызовет метод decorated, когда хост-элемент выдает указанное событие.
# HostListener - прослушает событие, вызванное элементом host, объявленным с помощью @HostListener.

привязка Хоста - объявляет привязку свойства узла.Angular автоматически проверяет привязки свойств хоста во время обнаружения изменений. Если а привязка меняется, она будет обновлять хост-элемент директивы.
# привязка Хоста - свяжет свойство с элементом хоста, если привязка изменяется, HostBinding обновит элемент хоста.

Примечание: обе ссылки были удалены recently.So, пожалуйста, попытайтесь понять это от HostBinding-HostListening поскольку пока нет надлежащей документации.

я постарался сделать простой пример для лучшего понимание,

DEMO:Проверьте ниже пример live in plunker-простой пример о @HostListener & @HostBinding

этот пример связывает a role property объявлена с @HostBinding до host element<p> и слушает click event объявлена с @HostListener на host element <p>

директивы.ТС

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

import { Component,ElementRef,ViewChild } from '@angular/core';
import {HostDirective} from './directives';

@Component({
selector: 'my-app',
template:
  `
  <p myDir>Host Element 
  <br><br>
  I'm(HostListener) listening to host's <b>click event</b> declared with @HostListener

  <br><br>
  I'm(HostBinding) binding <b>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> Open DOM of host element, click host element(in UI) and check role attribute(in DOM) </div> 
    `,
  directives: [HostDirective]
})
export class AppComponent {}
101  
2018-03-27 17:09:16

Быстрый совет, который помогает мне вспомнить, что они делают -

HostBinding('value') myValue; точно так же, как [value]="myValue"

и

HostListener('click') myClick(){ } точно так же, как (click)="myClick()"

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

60  
2017-11-07 13:01:54

вот простой пример наведения.

свойство шаблона компонента:

шаблон

<!-- 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" ;
  } 
}
42  
2017-04-01 11:13:01

еще одна хорошая вещь о @HostBinding это то, что вы можете объединить его с @Input Если ваша привязка напрямую зависит от входных данных, например:

@HostBinding('class.fixed-thing')
@Input()
fixed: boolean;
31  
2016-11-15 23:30:57

одна вещь, которая добавляет путаницы в этой теме является идея декораторов не очень ясно, и когда мы рассматриваем что-то вроде...

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

это работает, потому что это get accessor. Вы не можете использовать эквивалент функции:

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

в противном случае, выгода от использования @HostBinding это гарантирует, что обнаружение изменений выполняется при изменении связанного значения.

7  
2017-12-14 01:55:57

теория с меньшим количеством жаргонов

@Hostlistnening имеет дело в основном с хост-элементом say (кнопка) прослушивание действия пользователя и выполнение определенной функции say alert ("Ahoy!") в то время как @Hostbinding-это наоборот. Здесь мы слушаем изменения, которые произошли на этой кнопке внутри (скажем, когда она была нажата, что произошло с классом), и мы используем это изменение, чтобы сделать что-то еще, скажем, испустить определенный цвет.

пример

подумайте о сценарии, который вы хотели бы сделать любимым значком на компоненте, теперь вы знаете, что вам нужно знать, был ли элемент выбран с его классом изменен, нам нужен способ определить это. Это именно то, где @Hostbinding приходит.

и где есть необходимость знать, какое действие на самом деле было выполнено пользователем, то есть где @Hostlistening входит

5  
2017-01-19 12:51:28

Comments

    Ничего не найдено.
Click here to cancel reply.