在我漫游的世界各地互联网,现在尤其是角。我发现很多@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>。

其他回答

@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('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是用指令编写的 而其他的……和……]被写在(组件的)模板中。