web-dev-qa-db-ja.com

@HostBindingと@HostListener：彼らは何をし、何のためにいますか？

世界中の私の絡み合い、特に angular.ioスタイルのドキュメント で、私は@HostBindingと@HostListenerへの参照をたくさん見つけました。これは非常に基本的なことのようですが、残念ながら現時点ではそれらのドキュメントは少し概略的です。

誰が彼らが何であるか、彼らがどのように働くか、そして彼らの用法の例を与えることを説明してもらえますか？

angularangular-services
157
serlingpa

彼らが何をしているのか覚えておくのに役立つ簡単なヒント -

HostBinding('value') myValue;は[value]="myValue"とまったく同じです。

そして

HostListener('click') myClick(){ }は(click)="myClick()"とまったく同じです。

HostBindingとHostListenerはディレクティブに書かれ、他のものは(...)と[..]は（コンポーネントの）テンプレートの中に書かれます。

82
Shai Reznik - HiRez.io

これは基本的なホバーの例です。

コンポーネントのテンプレートプロパティ：

テンプレート 

<!-- 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" ;
  } 
}
43
serkan

@HostBindingに関するもう一つのいいところは、あなたのバインディングが直接入力に依存しているなら、@Inputと組み合わせることができるということです。例えば：

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

この主題に混乱を加える1つのことは、デコレータの考えがあまり明確にされていないということです、そして、我々が何かを考えるとき...

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

それは getアクセサ なので、うまくいきます。あなたは同等の機能を使用することができませんでした：

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

それ以外の場合、@HostBindingを使用する利点は、境界値が変化したときに変更検出が確実に実行されることです。

11
Done

ジャルゴン数の少ない理論

@Hostlistneningは基本的にHost要素say（ボタン）を扱い、@Hostbindingはその逆ですが、ユーザーによるアクションを聞いて特定の機能say alert（ "Ahoy！"）を実行します。ここでは、そのボタンの内部で行われた変更を聞いて（クラスに起こったことがクリックされたときに言いましょう）、そしてその変更を使って何か他のことをする、特定の色を出すと言います。

例

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

そして、@Hostlisteningが登場する場所は、ユーザーによって実際にどのようなアクションが実行されたのかを知る必要がある場所です。

6
Ralphkay

概要：

  • @HostBinding：このデコレータは クラスプロパティ をHost要素のプロパティに束縛します。
  • @HostListener：このデコレータは クラスメソッド をHost要素のイベントにバインドします。

例：

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で使用されると、Hostはディレクティブが配置されている要素を変更します。たとえば、このコンポーネントテンプレートを見てください。

<p p_Dir>some paragraph</p>

ここでp_Dirは<p>要素に対するディレクティブです。ディレクティブクラス内で@HostBindingまたは@HostListenerが使用されている場合、Hostは<p>を参照するようになりました。

4
Willem van der Veen