@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지침과 다른 것들로 작성 (...)하고 [..](구성 요소) 내부 템플릿을 작성됩니다.

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

컴포넌트의 템플릿 속성 :

주형

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

}

위의 예에서 다음이 발생합니다.

• 클릭 이벤트에 추가 된 이벤트 리스너는 구성 요소 내에서 click 이벤트가 발생할 때 발생합니다.
• color우리의 재산 AppComponent클래스는 바인딩되는 style.color구성 요소에 대한 속성입니다. color속성이 업데이트 될 때마다 style.color컴포넌트 의 속성도 업데이트됩니다
• 결과적으로 누군가 컴포넌트를 클릭 할 때마다 색상이 업데이트됩니다.

의 사용법 @Directive:

컴포넌트에서 사용할 수 있지만 이러한 데코레이터는 종종 속성 지시문에서 사용됩니다. @Directive호스트 에서 사용될 때 지시어가 배치되는 요소가 변경됩니다. 예를 들어이 컴포넌트 템플릿을 살펴보십시오.

<p p_Dir>some paragraph</p>

여기서 p_Dir은 <p>요소 에 대한 지시문입니다 . 때 @HostBinding또는 @HostListener지시어 클래스 내에서 사용되는 호스트는 이제 참조합니다 <p>.

전문 용어가 적은 이론

@Hostlistnening은 기본적으로 호스트 요소 say (단추)가 사용자가 액션을 듣고 특정 함수라고하는 alert ( "Ahoy!") 기능을 수행하는 반면 @Hostbinding은 다른 방식으로 처리됩니다. 여기서 우리는 그 버튼에서 내부적으로 일어난 변화를 듣고 (클래스에 무슨 일이 있었는지 클릭했을 때), 그 변화를 사용하여 다른 것을합니다.

예

구성 요소에서 즐겨 찾기 아이콘을 만들고자하는 시나리오를 생각해보십시오. 이제 클래스가 변경되어 즐겨 찾기 항목이 있는지 여부를 알아야한다는 것을 알았으므로이를 결정할 방법이 필요합니다. 바로 @Hostbinding이 들어온 곳입니다.

그리고 @Hostlistening이 들어오는 곳에서 사용자가 실제로 수행 한 작업을 알아야 할 필요가있는 곳