@HostBinding和@HostListener:它们是做什么用的?

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

@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;与[value]="myValue"完全相同

和

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

HostBinding和HostListener写在指令中 其他(...)和[..]被写入(组件的)模板中

简介:

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

例子:

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属性绑定到组件上的style.color属性。因此，每当color属性更新时，组件的style.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>