@HostBinding 및 @HostListener : 무엇을하고 무엇을위한 것입니까?

@HostBinding 및 @HostListener : 무엇을하고 무엇을위한 것입니까?

---

내 월드 와이드 interweb 주위 meanderings, 지금 특히에서 angular.io 스타일 문서 , 나는 많은 참조를 발견 @HostBinding하고 @HostListener. 그것들은 매우 근본적인 것처럼 보이지만 불행히도 현재 그들에 대한 문서는 약간 스케치입니다.

누구든지 자신이 무엇인지, 어떻게 작동하는지 설명하고 사용법의 예를 들어 줄 수 있습니까?

---

이 공식 문서를 확인 했습니까?

HostListener- 호스트 리스너를 선언합니다. 호스트 요소가 지정된 이벤트를 생성하면 Angular는 데코 레이팅 된 메소드를 호출합니다.

@HostListener-로 선언 된 호스트 요소에서 생성 된 이벤트를 수신합니다 @HostListener.

HostBinding- 호스트 속성 바인딩을 선언합니다. Angular는 변경 감지 중에 호스트 속성 바인딩을 자동으로 확인합니다. 바인딩이 변경되면 지시문의 호스트 요소가 업데이트됩니다.

@HostBinding-속성을 호스트 요소에 바인딩합니다. 바인딩이 변경되면 HostBinding호스트 요소가 업데이트됩니다.

---

참고 : 최근에 두 링크가 모두 제거되었습니다. 스타일 가이드 의 " HostBinding-HostListening "부분은 링크가 반환 될 때까지 유용한 대안이 될 수 있습니다.

---

이것이 의미하는 바를 이해하는 데 도움이되는 간단한 코드 예제는 다음과 같습니다.

데모 : plunker에 데모가 있습니다- "@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">돌아.

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

---

그들이하는 일을 기억하는 데 도움이되는 빠른 팁-

HostBinding('value') myValue; 정확히 동일 [value]="myValue"

과

HostListener('click') myClick(){ } 정확히 동일 (click)="myClick()"

---

HostBinding및 HostListener지침과 다른 것들로 작성 (...)하고 [..](구성 요소) 내부 템플릿을 작성됩니다.

---

기본 호버 예제는 다음과 같습니다.

Component's template property:

Template

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

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

And our directive

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

---

Another nice thing about @HostBinding is that you can combine it with @Input if your binding relies directly on an input, eg:

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

---

One thing that adds confusion to this subject is the idea of decorators is not made very clear, and when we consider something like...

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

It works, because it is a get accessor. You couldn't use a function equivalent:

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

Otherwise, the benefit of using @HostBinding is it assures change detection is run when the bound value changes.

---

Summary:

• @HostBinding: This decorator binds a class property to a property of the host element.
• @HostListener: This decorator binds a class method to an event of the host element.

Example:

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

}

In the above example the following occurs:

• An event listener is added to the click event which will be fired when a click event occurs anywhere within the component
• The color property in our AppComponent class is bound to the style.color property on the component. So whenever the color property is updated so will the style.color property of our component
• The result will be that whenever someone clicks on the component the color will be updated.

Usage in @Directive:

Although it can be used on component these decorators are often used in a attribute directives. When used in an @Directive the host changes the element on which the directive is placed. For example take a look at this component template:

<p p_Dir>some paragraph</p>

Here p_Dir is a directive on the <p> element. When @HostBinding or @HostListener is used within the directive class the host will now refer to the <p>.

---

Theory with less Jargons

@Hostlistnening deals basically with the host element say (a button) listening to an action by a user and performing a certain function say alert("Ahoy!") while @Hostbinding is the other way round. Here we listen to the changes that occurred on that button internally (Say when it was clicked what happened to the class) and we use that change to do something else, say emit a particular color.

Example

Think of the scenario that you would like to make a favorite icon on a component, now you know that you would have to know whether the item has been Favorited with its class changed, we need a way to determine this. That is exactly where @Hostbinding comes in.

And where there is the need to know what action actually was performed by the user that is where @Hostlistening comes in

참고URL : https://stackoverflow.com/questions/37965647/hostbinding-and-hostlistener-what-do-they-do-and-what-are-they-for