@HostBinding和@HostListener:它们做什么，它们是用来做什么的？
@HostBinding和@HostListener:它们做什么，它们是用来做什么的？
提问于 2016-06-22 18:41:52
在我漫步在万维网上，尤其是现在的angular.io style docs上，我发现了很多关于@HostBinding和@HostListener的引用。它们似乎是非常基础的，但不幸的是，目前关于它们的文档有点粗略。
谁能解释一下它们是什么，它们是如何工作的，并举例说明它们的用法？
回答 4
Stack Overflow用户
发布于 2016-11-16 05:30:58
@HostBinding的另一个好处是，如果你的绑定直接依赖于一个输入，你可以把它和@Input结合起来，例如：
@HostBinding('class.fixed-thing')
@Input()
fixed: boolean;Stack Overflow用户
发布于 2016-11-11 09:57:34
给这个主题增加困惑的一件事是，装饰器的概念并不是很清楚，当我们考虑像这样的东西时…
@HostBinding('attr.something')
get something() {
return this.somethingElse;
}它可以工作，因为它是一个get accessor。你不能使用等价的函数：
@HostBinding('attr.something')
something() {
return this.somethingElse;
}否则，使用@HostBinding的好处是它确保在绑定值更改时运行更改检测。
Stack Overflow用户
发布于 2021-02-04 20:15:50
// 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 {}
------------------------------------------------
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37965647
复制相关文章
相似问题