Angular の HostBinding および HostListener デコレータの詳細

この記事では、Angular-HostBinding と HostListener の 2 つのデコレーターについて説明し、これら 2 つのデコレーターの使用シナリオを紹介します。

私の疑問

Angular を独学で学習しているときに、この 2 つのデコレータに遭遇した人がいるかどうかはわかりません。 ——HostBinding および HostListener。公式サイトでこの 2 つのデコレーターの API の説明を読んだとき、単語はすべて理解できるのに、それらがつながっていると理解できなくなり、非常に戸惑いました。さらに、公式 Web サイトに示されている例も非常にわかりにくく、これら 2 つの API の使用シナリオがわかりにくくなっています。 [推奨関連チュートリアル: "angular チュートリアル"]

公式 Web サイトの説明

まず、これら 2 つの API の説明を見てみましょう。公式 Web サイト:

HostBinding(公式 Web サイトのリンク ):

は、DOM 属性をバインドされたプロパティとしてマークするために使用されます。ホストに接続し、構成メタデータを提供します。 Angular は、変更検出中にホスト プロパティのバインディングを自動的にチェックし、バインディングが変更された場合は、ディレクティブが配置されているホスト要素を更新します。

HostListener(公式 Web サイトのリンク ):

は、リッスンして提供する DOM イベントを宣言するために使用されます。イベント内の情報 これが発生したときに実行するハンドラー メソッド。

これを読んだ後、この 2 人の兄弟の使用シナリオがどのようなものであるかわかりませんか?私の意見では、これら 2 つのデコレータの機能は、複雑な DOM 操作を 1 つの命令に抽出してコードを合理化することを容易にする です。あまりナンセンスではありませんが、コードを読むだけで一目で理解できます。

コード例

現時点でビジネス シナリオがあるとします。入力ボックス

input があり、入力するたびに色が表示されます。文字数と枠線の色が変わるので「レインボー入力ボックス」と名付けました。

コンポーネントのカプセル化を使用しない場合は、関連する DOM 操作をコンポーネントに直接記述します。コードは次のとおりです:

@Component({
  selector: 'app-rainbow-input-demo',
  template: `
    <h3 id="这是一个彩虹输入框-每输入一次都会改变颜色">这是一个彩虹输入框，每输入一次都会改变颜色</h3>
    <input [class]="&#39;my-input&#39;"
           type="text"
           [style]="inputStyleObj"
           (keydown)="onKeyDown()"
    />
  `,
  styles:[
    `.my-input {
        border:none;
        outline: none;
        border: 2px solid #333333;
        border-radius: 5px;
      }`
  ]
})
export class RainbowInputDemoComponent {
  //默认的颜色样式
  public inputStyleObj = {
    color:null,
    borderColor:null,
  };
  //颜色库
  public possibleColors = [
    &#39;darksalmon&#39;, &#39;hotpink&#39;, &#39;lightskyblue&#39;,
    &#39;goldenrod&#39;, &#39;peachpuff&#39;, &#39;mediumspringgreen&#39;,
    &#39;cornflowerblue&#39;, &#39;blanchedalmond&#39;, &#39;lightslategrey&#39;
  ];
  //键盘落下事件
  onKeyDown(){
    const index = Math.floor(Math.random() * this.possibleColors.length);
    //如果我们直接使用this.inputStyleObj.color = this.possibleColors[index]的话，
    //this.inputStyleObj虽然内容变了，由于它是引用类型，其地址值没有变。所以不会触发视图的重新渲染
    //在angular中，和react似的，我们直接修改引用类型不会触发重新渲染，只能覆盖它或者合并它，使其地址值发生改变，才会触发重新渲染
    //如果觉得麻烦的话，完全可以在模板中使用[style.color]和[style.borderColor]
    this.inputStyleObj = {
      color:this.possibleColors[index],
      borderColor:this.possibleColors[index],
    }
  }
}

結果は次のとおりです:

以上、この機能を実装しましたが、ここで問題が発生しました。この

rainbowInput を他のコンポーネントで使用する必要がある場合はどうすればよいでしょうか?使用するたびにこれらのコードをコピーして貼り付ける必要がありますか?これは明らかにコンポーネントのカプセル化の原則に準拠していません。本当にこれを行うと、技術マネージャーやプロジェクト マネージャーもびっくりするでしょう。

そこで、これをコンポーネントまたは命令にカプセル化する必要があります。この記事では、まずこれをコマンドにカプセル化します。その理由については後ほど説明します。コードは次のとおりです。

@Directive({
  selector: '[appRainbow]'
})
export class RainbowInputDirective {
  public possibleColors = [
    'darksalmon', 'hotpink', 'lightskyblue',
    'goldenrod', 'peachpuff', 'mediumspringgreen',
    'cornflowerblue', 'blanchedalmond', 'lightslategrey'
  ];
  //字体颜色
  @HostBinding('style.color') color: string;
  //边框颜色
  @HostBinding('style.borderColor') borderColor: string;
  //监听键盘落下的事件
  @HostListener('keydown') onKeyDown() {
    //获取一个随机的颜色
    const index = Math.floor(Math.random() * this.possibleColors.length);
    this.color = this.borderColor = this.possibleColors[index];
  }
}

@Component({
  selector: 'app-rainbow-input-demo',
  template: `
    <h3 id="这是一个彩虹输入框-每输入一次都会改变颜色">这是一个彩虹输入框，每输入一次都会改变颜色</h3>
    <input [class]="&#39;my-input&#39;" type="text" appRainbow />
  `,
  styles:[
   	//省略，和上面相同
  ]
})
export class RainbowInputDemoComponent {}

上記のコードと同様に、繰り返されるロジックを抽出することで、コードの保守性と美しさが大幅に向上しました。

結論

コードでは、@HostBinding の機能が実際には特定の属性をホスト要素にバインドすることであることがわかりますが、この

attribute単なる 属性 ではありません。この属性は、Angular テンプレートでサポートされている属性を指します。実際、@HostBinding は、テンプレートの [] または bind- と同等です。同様に、@HostListener は、テンプレート内の () または on- と同等です。これにより、命令内のホスト要素に属性とメソッドをバインドできるようになります。達成される効果は、(keydow) と [style] を最初に直接記述した場合と同じです。テンプレート上で。したがって、これら 2 つのデコレータの文字列を無造作に記述することはできません。

命令とコンポーネントについて

ただし、実際には、Angular ではコンポーネントと命令の違いはそれほど大きくありません。これは、Angular のコンポーネント デコレータ @Component が次のとおりであるためです。 @ディレクティブから継承されます。

実際、この DOM 操作をコンポーネントにカプセル化することは不可能ではありません。コードは次のとおりです

@Component({
  selector:'input[appRainbow]'
})

ですが、実際には命令の記述方法とあまり変わりません。

ええー

。

概要

@HostBinding は、テンプレート @HostListener は、テンプレートの

() または on- と同等です。

は、Angular によって提供される命令内のデータとメソッド バインディングです。私たちは DOM を直接操作します。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！

以上がAngular の HostBinding および HostListener デコレータの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。