Angular中HostBinding和HostListener装饰器有何深入理解之处？

本文共计1569个文字，预计阅读时间需要7分钟。

本章节带大家了解Angular中的两个装饰器——HostBinding和HostListener，介绍它们的使用场景。

我的疑惑：不知道各位小伙伴在自学Angular的过程中，有没有遇到过这两个装饰器。

本篇文章带大家了解一下Angular中的两个装饰器——HostBinding和HostListener，介绍一下这两个装饰器的使用场景。

我的疑惑

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

官网说明

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

HostBinding（官网链接）：

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

HostListener（官网链接）：

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