要了解 @ HostListener和 @ HostBinding，您应该具有有关Angular指令的基本知识。Angular中有三种类型的指令:
- 组件
- Attribute指令
- 结构指令
组件和指令之间的基本区别是组件具有模板，而属性或结构指令没有模板。为了理解这两个概念，让我们从创建一个简单的自定义属性指令开始。下面的指令更改主体元素的背景颜色:
从 “@ angular/core” 导入 { Directive，ElementRef，Renderer}； @ 指令 ({选择器 '[appChbgcolor]'})导出ChangeBgColorDirective类 { 构造函数 (私有el: ElementRef， 私有渲染器: 渲染器) {这个 .ChangeBgColor( 'red' );} ChangeBgColor(color: string) { 这个 .renderer.setElementStyle( this .el.nativeElement, 'color', color);}}
要创建自定义属性指令，您需要创建一个类并用 @ directive装饰它。在指令类的构造函数中，注入ElementRef和Renderer对象。需要这两个类的实例来获取宿主元素和渲染器的引用。
您可以在组件模板上使用上述属性指令，如下面的清单所示:
< div appChbgcolor >< h3 > {{ title }} </ h3 ></ div >
在这里，保存宿主元素的组件类创建如下:
从 “@ angular/core” 导入 { Component}； @ Component({'app-root' 选择器，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})AppComponent导出类 {标题 =“嘿，ng开发人员!';}
现在， appChbgcolor指令将更改主体元素的颜色。
@ HostListener() 装饰器
在Angular中，@ HostListener() 函数装饰器允许您处理指令类中宿主元素的事件。
让我们考虑以下要求: 当您将鼠标悬停在主体元素上时，只有主体元素的颜色应该改变。此外，当鼠标消失时，主体元素的颜色应更改为其默认颜色。为此，您需要处理在指令类中的宿主元素上引发的事件。在角，你使用 @ HostListener() 做到这一点。
要以更好的方式理解 @ HostListener() ，请考虑另一个简单的场景: 在单击host元素时，您希望显示一个警报窗口。要在指令类中执行此操作，请添加 @ HostListener() 并将事件 “click” 传递给它。此外，关联一个函数以引发警报，如下面的清单所示:
@ HostListener( 'click') onClick() {window.alert (“已单击主机元素” )；}
在Angular中，@ HostListener() 函数装饰器使得处理指令类内的宿主元素中引发的事件变得非常容易。让我们回到我们的要求，即只有当鼠标悬停时，您才必须将颜色更改为红色，而当鼠标悬停时，主体元素的颜色应更改为黑色。为此，需要在指令类中处理宿主元素的mouseenter和mouseexit事件。为此，请修改appChbgcolor类指令，如下所示:
从 “@ angular/core” 导入 { Directive，ElementRef，Renderer，HostListener}； @ 指令 ({选择器 '[appChbgcolor]'})ChangeBgColorDirective导出类 { 构造函数 (私有el: ElementRef， 私有渲染器: 渲染器) {// this.ChangeBgColor('red');} @ HostListener( 'mouseover') onMouseOver() {这个 .ChangeBgColor( 'red' );} @ HostListener( 'click') onClick() {window.alert (“已单击主机元素” )；}@ HostListener( 'mouseleave') onMouseLeave() {这个 .ChangeBgColor( 'black' );} ChangeBgColor(color: string) { 这个 .renderer.setElementStyle( 此 .el.nativeElement， 'color' ，color)；}}
在指令类中，我们正在处理mouseenter和mouseexit事件。如您所见，我们使用 @ HostListener() 来处理这些宿主元素事件，并为其分配一个函数。
因此，让我们使用函数装饰器 @ HostListener() 来处理指令类中宿主元素的事件。
@ HostBinding() 装饰器
在Angular中，@ HostBinding() 函数装饰器允许您从指令类设置宿主元素的属性。
假设您想更改样式属性，如高度，宽度，颜色，边距，边框等或指令类中宿主元素的任何其他内部属性。在这里，您需要使用 @ HostBinding() 装饰器函数来访问主机元素上的这些属性，并在指令类中为其分配一个值。
@ HostBinding() 装饰器接受一个参数，即我们要在指令中分配的主机元素属性的名称。
在我们的示例中，我们的host元素是一个HTML div元素。如果要设置宿主元素的边框属性，可以使用 @ HostBinding() 装饰器，如下所示:
@ HostBinding( 'style.border') border: string; @ HostListener( 'mouseover') onMouseOver() {这个 .边框 = “ 5px纯绿色 ”；}
使用此代码，在鼠标悬停时，主元素边框将设置为绿色，实心5像素宽度。因此，使用 @ HostBinding修饰器，可以在指令类中设置宿主元素的属性。
喜欢这篇文章？
你有它!如果你喜欢这篇文章，请分享。此外，如果您还没有Infragistics Ignite UI for Angular组件签出，请务必这样做!他们有30个基于材料的Angular组件，可以帮助您更快地编写快速的web应用程序。
</p