@HostBindingと@HostListener：彼らは何をし、何のために使うのですか？

私のワールドワイドinterweb周りに蛇行し、今特にで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" ;
  } 
}

もう1つの優れた点@HostBindingは@Input、バインディングが入力に直接依存している場合は、次のように組み合わせることができることです。

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

この主題に混乱を加えることの1つは、デコレータのアイデアがあまり明確にされていないことです。

@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は基本的に、ホスト要素say（ボタン）がユーザーのアクションをリッスンし、特定の機能say Alert（ "Ahoy！"）を実行する一方で、@ Hostbindingはその逆です。ここでは、そのボタンで発生した変更を内部でリッスンし（たとえば、クラスで何が起こったかがクリックされたとき）、その変更を使用して他のことを実行します。たとえば、特定の色を放出します。

例

コンポーネントにお気に入りアイコンを作成するシナリオについて考えてみましょう。クラスが変更されてアイテムがお気に入りになっているかどうかを知る必要があることがわかったので、これを判別する方法が必要です。それがまさに@Hostbindingの出番です。

そして、@ Hostlisteningが入ってくるユーザーが実際に実行したアクションを知る必要がある場合