你检查过这些正式的文件了吗?

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

@HostListener——将监听由@HostListener声明的主机元素发出的事件。

HostBinding -声明一个主机属性绑定。Angular会在变更检测时自动检查主机属性绑定。如果绑定发生变化，它将更新指令的host元素。

@HostBinding -将属性绑定到主机元素，如果绑定改变，HostBinding将更新主机元素。

注意:这两个链接最近已被删除。样式指南中的“HostBinding-HostListening”部分可能是一个有用的选择，直到链接返回。

下面是一个简单的代码示例，可以帮助您理解这是什么意思:

演示:下面是plunker中的现场演示-“关于@HostListener和@HostBinding的一个简单示例”

This example binds a role property -- declared with @HostBinding -- to the host's element Recall that role is an attribute, since we're using attr.role. <p myDir> becomes <p mydir="" role="admin"> when you view it in developer tools. It then listens to the onClick event declared with @HostListener, attached to the component's host element, changing role with each click. The change when the <p myDir> is clicked is that its opening tag changes from <p mydir="" role="admin"> to <p mydir="" role="guest"> and back.

directives.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';
    }
}

AppComponent.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 {}

有一件事使这个主题更加混乱，那就是装饰者的概念不是很清楚，当我们考虑像……

@HostBinding('attr.something') 
get something() { 
    return this.somethingElse; 
 }

它可以工作，因为它是一个get访问器。你不能使用等价的函数:

@HostBinding('attr.something') 
something() { 
    return this.somethingElse; 
 }

否则，使用@HostBinding的好处是它确保在绑定值发生变化时运行更改检测。

@HostBinding的另一个好处是，如果你的绑定直接依赖于一个输入，你可以将它与@Input结合起来，例如:

@HostBinding('class.fixed-thing')
@Input()
fixed: boolean;

下面是一个基本的悬停例子。

组件的模板属性:

模板

<!-- attention, we have the c_highlight class -->
<!-- c_highlight is the selector property value of the directive -->

<p class="c_highlight">
    Some text.
</p>

我们的指令

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

@Directive({
    // this directive will work only if the DOM el has the c_highlight class
    selector: '.c_highlight'
 })
export class HostDirective {

  // we could pass lots of thing to the HostBinding function. 
  // like class.valid or attr.required etc.

  @HostBinding('style.backgroundColor') c_colorrr = "red"; 

  @HostListener('mouseenter') c_onEnterrr() {
   this.c_colorrr= "blue" ;
  }

  @HostListener('mouseleave') c_onLeaveee() {
   this.c_colorrr = "yellow" ;
  } 
}

少些行话的理论

@Hostlistnening主要处理的是主机元素，比如(一个按钮)监听用户的操作，并执行某个功能，比如警报(“Ahoy!”)，而@Hostbinding则相反。在这里，我们侦听在该按钮上发生的内部更改(例如当它被单击时，类发生了什么)，我们使用该更改来做其他事情，例如发出特定的颜色。

例子

想象一下这样的场景，你想在一个组件上创建一个收藏图标，现在你知道你必须知道这个项目是否随着类的改变而被收藏，我们需要一种方法来确定这一点。这正是@Hostbinding的用武之地。

如果需要知道用户实际执行了什么操作，就需要使用@Hostlistening

一个帮助我记住他们做什么的小技巧——

HostBinding括号(“价值”);与[value]="myValue"完全相同

And

HostListener('click') myClick(){}与(click)="myClick()"完全相同

HostBinding和HostListener是用指令编写的 而其他的……和……]被写在(组件的)模板中。

简介:

@HostBinding:这个装饰器将一个类属性绑定到宿主元素的属性上。 @HostListener:这个装饰器将一个类方法绑定到host元素的事件。

例子:

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

@Component({
  selector: 'app-root',
  template: `<p>This is nice text<p>`,
})
export class AppComponent  {

  @HostBinding('style.color') color; 

  @HostListener('click')
  onclick() {
    this.color =  'blue';
  }

}

在上面的例子中，会发生以下情况:

事件监听器被添加到click事件中，当组件中的任何地方发生click事件时，该监听器将被触发 AppComponent类中的color属性绑定到样式。属性。因此，每当color属性更新时，样式也会更新。我们组件的Color属性 结果是，每当有人点击组件时，颜色就会更新。

@Directive中的用法:

虽然它可以用在组件上，但这些装饰器通常用在属性指令中。当在@Directive中使用时，宿主会改变指令所在的元素。例如，看一下这个组件模板:

<p p_Dir>some paragraph</p>

这里的p_Dir是一个关于<p>元素的指令。当在指令类中使用@HostBinding或@HostListener时，主机现在将引用<p>。

// begginers
@Component({
  selector: 'custom-comp',
  template: ` <div class="my-class" (click)="onClick()">CLICK ME</div> `,
})
export class CustomComp {
  onClick = () => console.log('click event');
}

// pros
@Component({
  selector: 'custom-comp',
  template: ` CLICK ME `,
})
export class CustomComp {
  @HostBinding('class') class = 'my-class';
  @HostListener('click') onClick = () => console.log('click event');
}

// experts
@Component({
  selector: 'custom-comp',
  template: ` CLICK ME `,
  host: {
    class: 'my-class',
    '(click)': 'onClick()',
  },
})
export class CustomComp {
  onClick = () => console.log('click event');
}

------------------------------------------------
The 1st way will result in:
<custom-comp>
   <div class="my-class" (click)="onClick()">
      CLICK ME
   <div>
</custom-comp>

The last 2 ways will result in:
<custom-comp class="my-class" (click)="onClick()">
   CLICK ME
</custom-comp>

方法修饰符:

@HostBinding:动态绑定自定义逻辑到Host元素

 @HostBinding('class.active')
 activeClass = false;

@HostListen:监听Host元素上的事件

@HostListener('click')
 activeFunction(){
    this.activeClass = !this.activeClass;
 }

主机元素:

  <button type='button' class="btn btn-primary btn-sm" appHost>Host</button>