[解決済み】@HostBindingと@HostListener：これらは何をし、何のためにあるのですか？

質問

私がワールドワイド・インターウェブを彷徨う中で、特に今は angular.ioスタイルドキュメント への言及が多く見受けられます。 @HostBinding と @HostListener . これらは非常に基本的なものだと思われますが、残念ながら現時点でのドキュメントは少々大雑把なものです。

どなたか、これらが何であるか、どのように機能するか、またその使用例について説明していただけませんか？

どのように解決するのですか？

公式のドキュメントを確認しましたか？

ホストリスナー - ホストリスナーを宣言します。Angularは、ホスト要素が指定されたイベントを発すると、デコレートされたメソッドを呼び出します。

@HostListener - で宣言されたホスト要素から送られるイベントを待ち受けます。 @HostListener .

ホストバインディング - ホストプロパティバインディングを宣言しています。Angularは変更検出時にホストプロパティバインディングを自動的にチェックします。バインディングが変更されると、ディレクティブの host 要素が更新されます。

@HostBinding - は、バインディングが変更された場合、プロパティをホスト要素にバインドします。 HostBinding はホスト要素を更新します。

NOTE どちらのリンクも最近削除されました。The " ホストバインド-ホストリスニング スタイルガイドの " の部分は、リンクが復活するまでの間、有用な代替手段となるかもしれません。

この意味を理解するために、簡単なコード例を示します。

DEMO : 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"> を往復する。

ディレクティブ.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 {}