angular2 为什么要加@Input?

作者: wxfeng 分类: 未分类 发布时间: 2017-07-10 00:00    阅读 108 次

在这个例子中hightlightColorHighlightDirective的一个输入型属性。我们见过它没有用别名时的代码:

@Input() highlightColor: string;

也见过用别名时的代码:

@Input('myHighlight') highlightColor: string;

无论哪种方式,@Input装饰器都告诉Angular,该属性是公共的,并且能被父组件绑定。
如果没有
@Input,Angular就会拒绝绑定到该属性。

Either way, the @Input decorator tells Angular that this property ispublic and available for binding by a parent component.
Without  
@Input, Angular refuses to bind to the property.

但我们以前也曾经把模板HTML绑定到组件的属性,而且从来没有用过@Input
差异何在?

差异在于信任度不同。
Angular把组件的模板看做从属于该组件的。
组件和它的模板默认会相互信任。
这也就是意味着,组件自己的模板可以绑定到组件的任意属性,无论是否使用了
@Input装饰器。

但组件或指令不应该盲目的信任其它组件或指令。
因此组件或指令的属性默认是不能被绑定的。
从Angular绑定机制的角度来看,它们是私有的,而当添加了
@Input时,它们变成了公共
只有这样,它们才能被其它组件或属性绑定。

你可以根据属性名在绑定中出现的位置来判定是否要加@Input

  • 当它出现在等号右侧的模板表达式中时,它属于模板所在的组件,不需要@Input装饰器。

  • 当它出现在等号左边方括号([ ])中时,该属性属于其它组件或指令,它必须带有@Input 装饰器。

    When it appears in square brackets ([ ]) to the left of the equals (=),
    the property belongs to some other component or directive;
    that property must be adorned with the
    @Input decorator.

试用此原理分析下列范例:

<p [myHighlight]="color">Highlight me!</p>
  • color属性位于右侧的绑定表达式中,它属于模板所在的组件。
     该模板和组件相互信任。因此
    color不需要@Input装饰器。

    The color property in the expression on the right belongs to the template's component.
    The template and its component trust each other.
    The
    color property doesn't require the @Input decorator.

  • myHighlight属性位于左侧,它引用了MyHighlightDirective中一个带别名的属性,它不是模板所属组件的一部分,因此存在信任问题。
    所以,该属性必须带
    @Input装饰器。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注