Plongez en profondeur dans les décorateurs HostBinding et HostListener dans Angular

Cet article vous fera découvrir les deux décorateurs dans Angular—— HostBinding et HostListener , présentez les scénarios d'utilisation de ces deux décorateurs.

Mes doutes

Je ne sais pas si l'un d'entre vous a rencontré ces deux décorateurs - HostBinding et HostListener lorsque vous apprenez Angular par vous-même. Quand j'ai lu la description API de ces deux décorateurs sur le site officiel, j'étais vraiment perplexe. Je pouvais comprendre chaque mot, mais je ne pouvais tout simplement pas les comprendre lorsqu'ils étaient connectés ensemble. De plus, les exemples donnés sur le site officiel sont également très déroutants, ce qui me rend perplexe quant aux scénarios d'utilisation de ces deux API. [Tutoriels associés recommandés : "tutoriel angulaire"]

Description du site officiel

Regardons d'abord la description de ces deux API sur le site officiel :

HostBinding( Lien du site officiel) :

est utilisé pour marquer un attribut DOM comme une propriété liée à l'hôte et fournir des métadonnées de configuration. Angular vérifie automatiquement la liaison de la propriété hôte lors de la détection des modifications, et si la liaison change, il met à jour l'élément hôte où se trouve la directive.

HostListener（Lien du site officiel) :

Utilisé pour déclarer l'événement DOM à surveiller et fournir les informations à utiliser lorsque l’événement se produit. Méthode du processeur à exécuter.

Après avoir lu ceci, vous ne savez toujours pas quels sont les scénarios d'utilisation de ces deux frères ? À mon avis, le but de ces deux décorateurs est de nous faciliter l'extraction d'opérations DOM complexes en une seule instruction pour rationaliser le code. Pas de bêtises, lisez simplement le code et vous le comprendrez d’un coup d’œil.

Exemple de code

Supposons qu'il y ait un scénario commercial à ce moment-là, il y a une zone de saisieinput, chaque fois que nous entrez , la couleur des mots et la couleur de la bordure changeront. Nous l'avons nommé "Rainbow Input Box".

Si nous n'utilisons pas l'encapsulation du composant, nous pouvons écrire directement les opérations DOM pertinentes dans le composant. Le code est le suivant :

@Component({
  selector: 'app-rainbow-input-demo',
  template: `
    <h3>这是一个彩虹输入框，每输入一次都会改变颜色</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],
    }
  }
}

L'effet est comme indiqué dans la figure :

Ça y est, nous avons réalisé cette fonction, alors maintenant il y a un problème. Et si nous devons utiliser ceci rainbowInput dans d'autres composants ? Devons-nous copier et coller ces codes à chaque fois que nous les utilisons ? Évidemment, cela n'est pas conforme au principe de l'encapsulation des composants. Si vous faites vraiment cela, le responsable technique ou le chef de projet vous fera également exploser la tête.

@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>这是一个彩虹输入框，每输入一次都会改变颜色</h3>
    <input [class]="&#39;my-input&#39;" type="text" appRainbow />
  `,
  styles:[
   	//省略，和上面相同
  ]
})
export class RainbowInputDemoComponent {}

Tout comme le code ci-dessus, nous avons extrait la logique répétée, ce qui a grandement amélioré la maintenabilité et la beauté du code.

Conclusion

Dans le code, nous pouvons voir que la fonction de @HostBinding est en fait de lier un certain attribut au élément hôte, mais cet attribut n'est pas n'importe quel attribut. Cet attribut fait référence aux attributs pris en charge dans les modèles angulaires. En fait, @HostBinding est équivalent à

ou [] dans le modèle. De la même manière, @HostListener équivaut à bind- ou () dans le modèle. Cela nous permet de lier des attributs et des méthodes à l'élément hôte dans l'instruction. L'effet obtenu est le même que notre première méthode d'écriture de on- et (keydow) directement sur le modèle. Par conséquent, les chaînes de ces deux décorateurs ne peuvent pas être écrites avec désinvolture.

À propos des instructions et des composants

En fait, il ne nous est pas impossible d'encapsuler cette opération DOM dans un composant. Le code est le suivant

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

Mais ce n'est vraiment pas très différent de la méthode d'écriture des instructions :

@Directive({
  selector: '[appRainbow]'
})

.

Résumé

@HostBinding est équivalent à

ou [] sur le modèle

ou ();

Pour plus de connaissances sur la programmation, veuillez visiter : Enseignement de la programmation un >! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!