登录  /  注册
首页 > web前端 > js教程 > 正文

深入了解Angular中的HostBinding和HostListener装饰器

青灯夜游
发布: 2021-07-13 17:02:59
转载
2149人浏览过

本篇文章带大家了解一下angular中的两个装饰器——hostbinding和hostlistener,介绍一下这两个装饰器的使用场景。

深入了解Angular中的HostBinding和HostListener装饰器

我的疑惑

不知道各位小伙伴在自学angular的时候有没有遇到过这两个装饰器——HostBindingHostListener。这两个装饰器我在看官网的api说明的时候,真是百思不得其解,明明每个字我都能看懂,但是连在一起我就是看不懂了。而且官网上面给出的示例也很迷,让我搞不明白这俩api的使用场景到底是啥。【相关教程推荐:《angular教程》】

官网说明

先看看这两个api在官网上面的说明吧:

HostBinding官网链接):

用于把一个 DOM 属性标记为绑定到宿主的属性,并提供配置元数据。 Angular 在变更检测期间会自动检查宿主属性绑定,如果这个绑定变化了,它就会更新该指令所在的宿主元素。

HostListener官网链接):

用于声明要监听的 DOM 事件,并提供在该事件发生时要运行的处理器方法。

是不是看完之后也不知道这俩兄弟的使用场景到底是啥?在我看来,这俩装饰器的作用是为了方便我们将复杂的DOM操作可以抽取成一个指令,以此来精简代码。废话不多说,上代码,一看就懂。

代码示例

假设此时有一个业务场景,有一个输入框input,我们每次输入的时候,字的颜色和边框的颜色就会变化一下,我们取名叫“彩虹输入框”。

如果我们不使用组件封装的方式的话,直接在组件中写相关的DOM操作,代码如下:

@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],
    }
  }
}
登录后复制

效果如图:

1.gif

就这样,我们实现了这个功能,那么现在有个问题。假如这种rainbowInput我们还需要在其他组件用到怎么办,难道每次使用的时候我们都把这些代码复制粘贴一遍吗?很明显这不符合组件封装的原则,如果你真的这么做,技术经理或者项目经理也会打爆你的狗头、

那么我们就需要将其封装成一个组件或者一个指令。在这篇文章中我们先把它封装成一个指令,至于原因后面再说。代码如下:

@Directive({
  selector: &#39;[appRainbow]&#39;
})
export class RainbowInputDirective {
  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;
  ];
  //字体颜色
  @HostBinding(&#39;style.color&#39;) color: string;
  //边框颜色
  @HostBinding(&#39;style.borderColor&#39;) borderColor: string;
  //监听键盘落下的事件
  @HostListener(&#39;keydown&#39;) onKeyDown() {
    //获取一个随机的颜色
    const index = Math.floor(Math.random() * this.possibleColors.length);
    this.color = this.borderColor = this.possibleColors[index];
  }
}

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

就像上面代码写的那样,我们将重复的逻辑抽取了出来,使代码的维护性和美观度都有了很大的提升。

结论

在代码中我们可以看到@HostBinding的作用其实就是将某个属性绑定到了宿主元素上,但是这个属性不是随随便便的属性。这个属性指的是angular模板中支持的属性,其实@HostBinding就相当于模板中的[]或者bind-。同理@HostListener就相当于模板中的()或者on-。使我们可以在指令当中就可以将属性和方法绑定到宿主元素上,实现的效果和我们第一种直接将(keydow)[style]直接写在模板上是一样的。所以说,这俩装饰器里面的字符串那可不能随便写。

关于指令和组件

但是,其实在angular当中,组件和指令其实区别不是特别大,因为angular中的组件装饰器@Component就是继承自@Directive的。

其实我们将这个DOM操作封装成一个组件也不是不可以,代码如下

@Component({
  selector:&#39;input[appRainbow]&#39;
})
登录后复制

但是和指令写法:

@Directive({
  selector: &#39;[appRainbow]&#39;
})
登录后复制

真的差别不大。

总结

@HostBinding相当于模板上的[]或者bind-

@HostListener相当于模板上的()或者on-

就是angular为了不希望我们直接操作DOM,提供的指令中的数据和方法绑定。

更多编程相关知识,请访问:编程教学!!

以上就是深入了解Angular中的HostBinding和HostListener装饰器的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号