简体   繁体   English

Angular 中的 @Input 和 @HostBinding 装饰器有什么区别?

[英]What are the differences between the @Input and @HostBinding decorators in Angular?

These decorators looks like they are doing the same thing.这些装饰器看起来像是在做同样的事情。

If I create a Directive, the Input and HostBinding decorators are receiving a value of a specific attribute from the template.如果我创建指令,则 Input 和 HostBinding 装饰器将从模板接收特定属性的值。

What are exatly the differencies between these decorators in Angular ? Angular 中这些装饰器之间的具体区别是什么?

Thanks guys.谢谢你们。

EDIT:编辑:

@Segev gives an incorrect answer. @Segev 给出了错误的答案。 According to Angular official documentation :根据 Angular 官方文档:

Input - Decorator that marks a class field as an input property and supplies configuration metadata.输入 - 将类字段标记为输入属性并提供配置元数据的装饰器。 The input property is bound to a DOM property in the template.输入属性绑定到模板中的 DOM 属性。 During change detection, Angular automatically updates the data property with the DOM property's value.在更改检测期间,Angular 会使用 DOM 属性的值自动更新数据属性。

HostBinding - Decorator that marks a DOM property as a host-binding property and supplies configuration metadata. HostBinding - 将 DOM 属性标记为主机绑定属性并提供配置元数据的装饰器。 Angular automatically checks host property bindings during change detection, and if a binding changes it updates the host element of the directive. Angular 在更改检测期间自动检查主机属性绑定,如果绑定更改,它会更新指令的主机元素。

As i can read in the Angular official documentation these decorators are similar and I don't understand the Segev answer....正如我在 Angular 官方文档中所读到的,这些装饰器是相似的,我不明白 Segev 的答案......

Two completely different things完全不同的两件事

@Input() - allows you to "inject" context into a component @Input() - 允许您将上下文“注入”到组件中

@HostBinding() - let you access the element encapsulating (or "hosting") your component @HostBinding() - 让您访问封装(或“托管”)组件的元素

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM