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

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

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

Ответы на вопрос(7)

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

@HostBinding('class.fixed-thing')
@Input()
fixed: boolean;
 altschuler29 июл. 2018 г., 22:56
Пример прямо в моем ответе, вы просто пишете оба декоратора один за другим, порядок должен быть неуместным
 Mano27 июл. 2018 г., 09:55
Можете ли вы поделиться примером использования с@Input()?

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

шаблон

<!-- 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" ;
  } 
}
 serkan06 авг. 2017 г., 03:55
@mtpultz Это в классе.
 Michał Ziobro07 мая 2017 г., 23:00
Это значит, что при вводе мыши нужно изменить цвет на синий, а при отпускании мыши - на желтый.
 mtpultz06 июл. 2017 г., 19:57
Где вы размещаете директиву в разметке? Кажется, вы поместите его в тег body, но это будет за пределами корневого компонента. Если вас смущает этот ответ, эта ссылка может помочьng2.codecraft.tv/custom-directives/hostlistener-and-hostbinding
 luqo3305 мая 2017 г., 22:07
Я не вижу этот принятый ответ как ответ на заданный вопрос. Не могли бы вы дать какое-нибудь объяснение? Как то, что c_colorrr, c_onEnterrr (), c_onLeaveeee делают в этом конкретном фрагменте кода?
Теория с меньшим количеством жаргонов

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

пример

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

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

 matmancini02 февр. 2018 г., 12:57
Это сбивает с толку, а имена декораторов неточны.
Решение Вопроса

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

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

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

ПРИМЕЧАНИЕ: обе ссылки были недавно удалены. Так что, пожалуйста, попробуйте понять это сHostBinding-HostListening поскольку надлежащей документации пока нет.

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

ДЕМО:Посмотрите пример ниже, живите в плункере - простой пример о @HostListener & @HostBinding

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

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>
  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 {}
 CommonSenseCode19 сент. 2016 г., 21:12
этот декоратор все еще используется, кажется, ссылки были удалены из документации angular2
 micronyks25 дек. 2016 г., 08:49
@ MuhammadSaleh, пожалуйста, покажите это практически, трудно угадать и ответить.
 mtpultz06 июл. 2017 г., 20:19
Если кто-то ищет пример, я нашел это краткое прочтение, а внизу вы можете вырезать, вставлять и играть с кодом -ng2.codecraft.tv/custom-directives/hostlistener-and-hostbinding
 Muhammad Saleh25 дек. 2016 г., 08:45
Ребята, вопрос производительности .. Если бы я использовал@HostListener с событием прокрутки окна внутри директивы, и было несколько экземпляров этой директивы, будет ли прослушиватель событий привязан ко всем экземплярам или у него будет только один прослушиватель и будут выполняться методы внутри него?
 yogihosting20 окт. 2017 г., 17:20
проверьте документы здесь -angular.io/guide/attribute-directives
 tmjee27 окт. 2017 г., 01:44
Я не думаю, что естьdirectives атрибут для@Component
 micronyks22 сент. 2016 г., 16:40
@ Mr.EasyAnswersMcFly обновленный ответ с примечанием и ссылкой. Пожалуйста, обратите внимание, что надлежащая документация недоступна
 Targaryen21 сент. 2016 г., 16:45
Они находятся на шпаргалке:angular.io/docs/ts/latest/guide/cheatsheet.html
 micronyks25 дек. 2016 г., 09:04
@MuhammadSaleh для прокрутки трудно сказать, как он рассчитывает и рассчитывает ... но это точно, что каждый экземпляр будет иметь отдельный слушатель
 Muhammad Saleh25 дек. 2016 г., 08:57
@micronyks Пожалуйста, проверьте этоPlunkr Проверьте его консоль, пожалуйста. В этом примере у меня есть несколько экземпляров одной и той же директивы. Поэтому мой вопрос: означает ли это, что у меня будет несколько слушателей событий, слушающих событие прокрутки [плохая производительность, я полагаю], или Angular достаточно умен, чтобы иметь один глобальный слушатель события прокрутки окна и просто выполнить методы внутри, или это не имеет большого значения?
 micronyks20 сент. 2016 г., 04:06
Да, он все еще используется, но позвольте мне подтвердить это один раз. Я сообщу вам, если смогу выяснить что-то еще.
 Nicolas S.Xu29 нояб. 2016 г., 21:59
@micronyks За то, что вы только что сказали в ответе. Где я могу найти документ для этого? Спасибо!
Резюме:@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';
  }

}

Слушатель события добавляется к событию click, которое будет запущено, когда событие click происходит где-либо внутри компонента.color недвижимость в нашемAppComponent класс связан сstyle.color свойство на компонент. Так что всякий раз, когдаcolor свойство обновляется, так будетstyle.color собственность нашего компонентаВ результате каждый раз, когда кто-то нажимает на компонент, цвет будет обновляться.Использование в@Directive:

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

<p p_Dir>some paragraph</p>

Здесь p_Dir - это директива<p> элемент. когда@HostBinding или же@HostListener используется в классе директивы, теперь хост будет ссылаться на<p>.

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

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

А также

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

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

 MrBoJangles18 февр. 2018 г., 06:33
Ах, это щелкнуло (каламбур) со мной благодаря этому ответу.@HostListener это путь, когда у вас нет ничего в DOM для типичного связывания событий, такого как ввод с клавиатуры в моем случае.

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

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

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

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

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

Ваш ответ на вопрос