你检查过这些官方文档吗？

HostListener - 声明一个主机监听器。当宿主元素发出指定的事件时，Angular 将调用装饰方法。

@HostListener - 将监听由 . 声明的宿主元素发出的事件@HostListener。

HostBinding - 声明一个主机属性绑定。Angular 在更改检测期间自动检查主机属性绑定。如果绑定更改，它将更新指令的宿主元素。

@HostBinding - 将属性绑定到宿主元素，如果绑定发生变化，HostBinding将更新宿主元素。

注意： 这两个链接最近都被删除了。在链接返回之前，样式指南的“ HostBinding-
HostListening
”部分可能是一个有用的替代方案。

这是一个简单的代码示例，可以帮助您了解这意味着什么：

演示：这是 plunker 中的演示 - “关于 @HostListener 和 @HostBinding
的简单示例”

• role这个例子将一个属性——声明为——绑定@HostBinding到宿主的元素
  • 回想一下，这role是一个属性，因为我们使用的是attr.role.
  • <p myDir>``<p mydir="" role="admin">当您在开发人员工具中查看它时会变为。
• 然后它会监听用onClick声明的事件@HostListener，附加到组件的宿主元素，role每次点击都会改变。
  • 单击时的变化<p myDir>是它的开始标签从来<p mydir="" role="admin">回变化<p mydir="" role="guest">。

指令.ts

import {Component,HostListener,Directive,HostBinding,Input} from '@angular/core';

@Directive({selector: '[myDir]'})
export class HostDirective {
  @HostBinding('attr.role') role = 'admin'; 
  @HostListener('click') onClick() {
    this.role= this.role === 'admin' ? 'guest' : 'admin';
  }
}

应用组件.ts

import { Component,ElementRef,ViewChild } from '@angular/core';
import {HostDirective} from './directives';

@Component({
selector: 'my-app',
template:
  `
  <p myDir>Host Element 
    <br><br>

    We have a (HostListener) listening to this host's <b>click event</b> declared with @HostListener

    <br><br>

    And we have a (HostBinding) binding <b>the role property</b> to host element declared with @HostBinding 
    and checking host's property binding updates.

    If any property change is found I will update it.
  </p>

  <div>View this change in the DOM of the host element by opening developer tools,
    clicking the host element in the UI.

    The role attribute's changes will be visible in the DOM.</div> 
    `,
  directives: [HostDirective]
})
export class AppComponent {}