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

组件的模板属性:

模板

<!-- 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" ;
  } 
}

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

组件的模板属性:

模板

<!-- 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" ;
  } 
}

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

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

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

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

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

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

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>

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