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

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

And

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

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

// 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括号(“价值”);与[value]="myValue"完全相同

And

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

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

方法修饰符:

@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>

少些行话的理论

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

例子

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

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

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

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