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

@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装饰器。