angular-cn/public/docs/ts/latest/guide/attribute-directives.jade

block includes
  include ../_util-fns

:marked
  An **Attribute** directive changes the appearance or behavior of a DOM element.
  
  **属性**型指令用于改变一个DOM元素的外观或行为。

:marked
  In this chapter we will
  
  本章中我们将：
  * [write an attribute directive to change the background color](#write-directive)
  * [写一个用来改变背景色的属性型指令](#write-directive)
  * [apply the attribute directive to an element in a template](#apply-directive)
  * [把这个属性型指令应用到模板中的元素](#apply-directive)
  * [respond to user-initiated events](#respond-to-user)
  * [响应用户引发的事件](#respond-to-user)
  * [pass values into the directive using data binding](#bindings)
  * [使用数据绑定把值传到指令中](#bindings)

  试试<live-example></live-example>。

  ## Directives overview
  ## 指令概览
  
  There are three kinds of directives in Angular:
  
  在Angular中有三种类型的指令
  1. Components
  1. 组件
  1. Structural directives  
  1. 结构型指令
  1. Attribute directives
  1. 属性型指令

  A *Component* is really a directive with a template. 
  It's the most common of the three directives and we tend to write lots of them as we build applications.

  *组件*其实是一个带模板的指令。
  它是这三种指令中最常用的，我们在构建应用程序时会写大量组件。

  [*Structural* directives](structural-directives.html) can change the DOM layout by adding and removing DOM elements. 
  [NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf) are two familiar examples.
  
  [*结构型*指令](structural-directives.html)会通过添加/删除DOM元素来更改DOM树布局。
  [NgFor](template-syntax.html#ngFor)和[NgIf](template-syntax.html#ngIf)就是两个最熟悉的例子。
  
  An *Attribute* directive can change the appearance or behavior of an element.
  The built-in [NgStyle](template-syntax.html#ngStyle) directive, for example,
  can change several element styles at the same time.
  
  *属性型*指令改变一个元素的外观或行为。
  比如，内置的[NgStyle](template-syntax.html#ngStyle)指令可以同时修改元素的多种样式。
  
  We are going to write our own attribute directive to set an element's background color
  when the user hovers over that element.
  
  我们准备写一个自己的属性型指令，当用户把鼠标悬浮在元素上时，它会设置元素的背景色。
.l-sub-section
  :marked
    We don't need *any* directive to simply set the background color.
    We can set it with the special [Style Binding](template-syntax.html#style-binding) like this:
    
    其实我们并不需要*任何*指令来设置背景色。
    可以通过[样式绑定](template-syntax.html#style-binding)来设置它，就像这样：
  +makeExample('attribute-directives/ts/app/app.component.1.html','p-style-background')
  
  :marked
    That wouldn't be nearly as much fun as creating our own directive.
    
    但这样的话就没法享受创建自定义指令的乐趣了。
    
    Besides, we're not just *setting* the color; we'll be *changing* the color
    in response to a user action, a mouse hover.
    
    再说，我们不仅要*设置*颜色，还要响应用户的动作(鼠标悬浮)，来*更改*这个颜色。

.l-main-section
a#write-directive
:marked
  ## Build a simple attribute directive
  ## 创建一个简单的属性型指令
  
  An attribute directive minimally requires building a controller class annotated with 
  `@Directive`, which specifies the selector identifying
  the attribute associated with the directive. 
  The controller class implements the desired directive behavior.
  
  属性型指令至少需要一个带有`@Directive`装饰器的控制器类。该装饰器指定了一个选择器，用于指出与此指令相关联的属性名字。
  控制器类实现了指令需要具备的行为。

  Let's build a small illustrative example together.
  
  让我们构建一个小例子来说明它。

:marked
  ### Our first draft
  ### 第一个草稿
  Create a new project folder (`attribute-directives`) and follow the steps in the [QuickStart](../quickstart.html).
  
  创建一个项目文件夹(`attribute-directives`)并按照[快速起步](../quickstart.html)中的步骤进行初始化。

include ../_quickstart_repo
:marked
  Create the following source file in the indicated folder with the given code:
  
  在指定的文件夹下创建下列源码文件：
  
+makeExample('app/highlight.directive.1.ts')

block highlight-directive-1
  :marked
    We begin by importing some symbols from the Angular `core`.
    We need the `Directive` symbol for the `@Directive` decorator.
    We need the `ElementRef` to [inject](dependency-injection.html) into the directive's constructor
    so we can access the DOM element.
    We also need `Renderer` so we can change the DOM element's style.
    We don't need `Input` immediately but we will need it later in the chapter.
  
    我们先从Angular的`core`库中导入一些符号。
    然后需要为`@Directive`装饰器导入`Directive`。
    然后需要导入[注入](dependency-injection.html)到指令构造函数中的`ElementRef`，这样我们才能访问DOM元素。
    还需要注入`Renderer`服务，以便更改DOM元素的样式。
    虽然眼下还不需要`Input`，但在稍后的章节中很快就会用到它。
    
    Then we define the directive metadata in a configuration object passed
    as an argument to the `@Directive` decorator function. 

    然后，通过给`@Directive`装饰器函数传入一个“配置对象”来定义指令的元数据。
:marked
  A `@Directive` decorator for an attribute directive requires a css selector to identify
  the HTML in the template that is associated with our directive.
  The [CSS selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
  is the attribute name in square brackets.
 
  属性型指令的`@Directive`装饰器需要一个css选择器，以便从模板中识别出关联到这个指令的HTML。
  [css中的attribute选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)就是属性名称加方括号。
  
  Our directive's selector is `[myHighlight]`. 
  Angular will locate all elements in the template that have an attribute named `myHighlight`. 
  
  这个指令的选择器是`[myHighlight]`，于是Angular就会在模板中找到带有`myHighlight`这个属性的元素。
.l-sub-section
  :marked
    ### Why not call it "highlight"?
    ### 为什么不直接叫做"highlight"？
    *highlight* is a nicer name than *myHighlight* and, technically, it would work if we called it that.
    
    从技术上说，*highlight*是一个比*myHighlight*更好的名字，而且在这里它确实能工作。
 
    However, we recommend picking a selector name with a prefix to ensure
    that it cannot conflict with any standard HTML attribute, now or in the future.
    There is also less risk of colliding with a third-party directive name when we give ours a prefix.
    
    不过，我们还是建议选择一个带前缀的选择器名称，以保证无论现在还是未来它都不会和任何标准HTML属性发生冲突。
    当使用自己的前缀时，也会减少和第三方指令发生命名冲突的风险。

    We do **not** prefix our `highlight` directive name with **`ng`**.
    That prefix belongs to Angular.
    
    我们**不能**给自己的`highlight`指令添加**`ng`**前缀。
    那个前缀属于Angular。

    We need a prefix of our own, preferably short, and `my` will do for now.
    
    我们需要一个自己的前缀，最好短点，目前用的这个`my`前缀就不错。
p
  | After the #[code @Directive] metadata comes the directive's controller class, which contains the logic for the directive. 
  +ifDocsFor('ts')
    | We export `HighlightDirective` to make it accessible to other components.
p
  | `@Directive`元数据的后面就是指令的控制器类，它包括了指令的工作逻辑。
  +ifDocsFor('ts')
    | 我们导出`HighlightDirective`以便让它可以被其他组件访问。
:marked
  Angular creates a new instance of the directive's controller class for
  each matching element, injecting an Angular `ElementRef` and `Renderer`
  into the constructor.
  `ElementRef` is a service that grants us direct access to the DOM element
  through its `nativeElement` property and with `Renderer` we can set the element style.
  
  Angular会为每个被指令匹配上的元素创建一个该指令控制器类的实例，并把Angular的`ElementRef`和`Renderer`注入进它的构造函数。
  `ElementRef`是一个服务，它赋予我们直接访问DOM元素的能力。通过它的`nativeElement`属性和`Renderer`服务，我们可以设置元素的样式。
  
.l-main-section
a#apply-directive
:marked
  ## Apply the attribute directive
  ## 使用属性型指令
  The `AppComponent` in this sample is a test harness for our `HighlightDirective`.
  Let's give it a new template that 
  applies the directive as an attribute to a paragraph (`p`) element.
  In Angular terms, the `<p>` element will be the attribute **host**.
  
  这个例子中，`AppComponent`是用来测试`HighlightDirective`的一个壳。
  我们来给它一个新的模板，把这个指令作为属性应用到一个段落(`p`)元素上。
  用Angular的话说，`<p>`元素就是这个属性型指令的**宿主**。
p
  | We'll put the template in its own 
  code #[+adjExPath('app.component.html')]
  | file that looks like this:
p
  | 我们把这个模板放到自己的
  code #[+adjExPath('app.component.html')]
  | 文件中，就像这样：
+makeExample('attribute-directives/ts/app/app.component.1.html',null,'app/app.component.html')(format=".")
:marked
  A separate template file is clearly overkill for a 2-line template. 
  Hang in there; we're going to expand it later.
  Meanwhile, we'll revise the `AppComponent` to reference this template.
  
  对于一个只有两行的模板来说，使用一个独立的模板文件确实有点过分了。
  先别管它，我们后面很快就会扩展它。
  同时，要修改`AppComponent`，使其引用这个模板。
+makeExample('attribute-directives/ts/app/app.component.ts',null,'app/app.component.ts')
:marked
  We'll add an `import` statement to fetch the 'Highlight' directive and, 
  added that class to the `declarations` NgModule metadata so that Angular 
  will recognize our directive when it encounters `myHighlight` in the template. 
  
  我们添加了一个`import`语句来获得'Highlight'指令类，并把这个类添加到`AppComponent`组件的`directives`数组中。
  这样，当Angular在模板中遇到`myHighlight`时，就能认出这是指令了。

+makeExample('attribute-directives/ts/app/app.module.ts',null,'app/app.module.ts')

:marked
  We run the app and see that our directive highlights the paragraph text.
  
  运行应用，就会看到我们的指令确实高亮了段落中的文本。
  
figure.image-display
  img(src="/resources/images/devguide/attribute-directives/first-highlight.png" alt="First Highlight")
.l-sub-section
  :marked
    ### Your directive isn't working? 
    ### 你的指令没生效？

    Did you remember to add the directive to the the `declarations` attribute of `@NgModule`? It is easy to forget!
    
    你记着设置`@Component`的`directives`数组了吗？它很容易被忘掉。
    
    Open the console in the browser tools and look for an error like this:
    
    打开浏览器调试工具的控制台，会看到像这样的错误信息：
  code-example(format="nocode").
    EXCEPTION: Template parse errors:
      Can't bind to 'myHighlight' since it isn't a known property of 'p'.
  :marked
    Angular detects that we're trying to bind to *something* but it doesn't know what.
    We have to tell it by listing `HighlightDirective` in the `declarations` metadata array.
    
    这是因为Angular检测到我们正在尝试绑定到*某些东西*，但它不认识。
    我们必需把`HighlightDirective`列在元数据的`declarations`数组中，来告诉它有这样一个指令。
    
:marked
  Let's recap what happened.
  
  我们来概括一下发生了什么。
  
  Angular found the `myHighlight` attribute on the `<p>` element. It created
  an instance of the `HighlightDirective` class, 
  injecting a reference to the element into the constructor 
  where we set the `<p>` element's background style to yellow.
  
  Angular在`<p>`元素上发现了一个`myHighlight`属性。
  然后它创建了一个`HighlightDirective`类的实例，并把所在元素的引用注入到了指令的构造函数中。
  在构造函数中，我们把`<p>`元素的背景设置为了黄色。

.l-main-section
a#respond-to-user
:marked
  ## Respond to user action
  
  ## 响应用户的操作

  We are not satisfied to simply set an element color.
  Our directive should set the color in response to a user action.
  Specifically, we want to set the color when the user hovers over an element.
  
  我们不能满足于设置元素的颜色。
  我们的指令要响应用户的操作而设置颜色。
  确切的说，希望在用户的鼠标滑过当前元素时设置颜色。
  
  We'll need to
  
  我们需要：
  
  1. detect when the user hovers into and out of the element,
  1. 检测用户的鼠标啥时候进入和离开这个元素。
  2. respond to those actions by setting and clearing the highlight color, respectively.
  2. 通过设置和清除高亮色来响应这些操作。
  
  We apply the `@HostListener` !{_decorator} to methods which are called when an event is raised.

  从事件检测开始吧。
  把`host`属性加入指令的元数据中，并给它一个配置对象，用来指定两个鼠标事件，并在它们被触发时，调用指令中的方法：
  
+makeExample('attribute-directives/ts/app/highlight.directive.2.ts','host')(format=".")

.l-sub-section
  
  :marked
    The `@HostListener` !{_decorator} refers to the DOM element that hosts our attribute directive, the `<p>` in our case.
    
    `@HostListener`装饰器引用的是我们这个属性型指令的宿主元素，在这个例子中就是`<p>`。
     
    We could have attached event listeners by manipulating the host DOM element directly, but
    there are at least three problems with such an approach:
    
    可以通过直接操纵DOM元素的方式给宿主DOM元素挂上一个事件监听器。
    但这种方法至少有三个问题：
    1. We have to write the listeners correctly.
    1. 必须正确的书写事件监听器。
    1. We must *detach* our listener when the directive is destroyed to avoid memory leaks.
    1. 当指令被销毁的时候，必须*摘掉*事件监听器，否则就会导致内存泄露。
    1. We'd be talking to DOM API directly which, we learned, is something to avoid.
    1. 必须直接和DOM API打交道，但正如我们学过的那样，应该避免这样做。

    Let's roll with the `@HostListener` !{_decorator}. 
    
    我们还是围绕`@HostListener`装饰器来吧。
    
:marked
  Now we implement the two mouse event handlers:
  
  现在，我们实现那两个鼠标事件处理器：
  
+makeExample('attribute-directives/ts/app/highlight.directive.2.ts','mouse-methods')(format=".")

:marked
  Notice that they delegate to a helper method that sets the color via a private local variable, `#{_priv}el`.
  We revise the constructor to capture the `ElementRef.nativeElement` in this variable.

  注意，它们把处理逻辑委托给了一个辅助方法，这个方法会通过一个私有变量`#{_priv}el`来设置颜色。
  我们要修改构造函数，来把`ElementRef.nativeElement`存进这个私有变量。

+makeExample('attribute-directives/ts/app/highlight.directive.2.ts','ctor')(format=".")

:marked
  Here's the updated directive:
  
  这里是更新过的指令：
  
+makeExample('app/highlight.directive.2.ts')

:marked
  We run the app and confirm that the background color appears as we move the mouse over the `p` and
  disappears as we move out.
  
  运行本应用，就可以确认：当把鼠标移到`p`上的时候，背景色就出现了，而移开的时候，它消失了。
figure.image-display
  img(src="/resources/images/devguide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight")
.l-main-section
a#bindings
:marked
  ## Configure the directive with binding
  ## 通过绑定来配置指令

  Currently the highlight color is hard-coded within the directive. That's inflexible.
  We should set the color externally with a binding like this:

  现在的高亮颜色是在指令中硬编码进去的。这样没有弹性。
  我们应该通过绑定从外部设置这个颜色。就像这样：
+makeExample('attribute-directives/ts/app/app.component.html','pHost')
:marked
  We'll extend our directive class with a bindable **input** `highlightColor` property and use it when we highlight text.
  
  我们将给指令类增加一个可绑定**输入**属性`highlightColor`，当需要高亮文本的时候，就用它。

  Here is the final version of the class:
  
  这里是该类的最终版：
  
+makeExcerpt('app/highlight.directive.ts', 'class')

a#input
:marked
  The new `highlightColor` property is called an *input* property because data flows from the binding expression into our directive.
  Notice the `@Input()` #{_decorator} applied to the property.

  新的`highlightColor`属性被称为“输入”属性，这是因为数据流是从绑定表达式到这个指令的。
  注意，在定义这个属性的时候，我们调用了`@Input()`#{_decoratorCn}。
  
+makeExcerpt('app/highlight.directive.ts', 'color')

:marked
  `@Input` adds metadata to the class that makes the `highlightColor` property available for 
  property binding under the `myHighlight` alias. 
  We must add this input metadata or Angular will reject the binding.
  See the [appendix](#why-input) below to learn why.
  
  `@Input`把元数据添加到了类上，这让`highlightColor`能被以`myHighlight`为别名进行绑定。
  必须添加这个input元数据，否则Angular会拒绝绑定。
  参见下面的[附录](#why-input)来了解为何如此。
.l-sub-section
  :marked
    ### @Input(_alias_) 
    ### @Input(_别名_)
    The developer who uses this directive expects to bind to the attribute name, `myHighlight`.
    The directive property name is `highlightColor`. That's a disconnect.
    
    使用这个指令的开发人员会期望绑定到属性名`myHighlight`上，
    而指令中的属性名是`highlightColor`。两者联系不起来。
    
    We could resolve the discrepancy by renaming the property to `myHighlight` and define it as follows:
    
    我们可以通过把属性名改为`myHighlight`来解决这个矛盾，就像这样：

  +makeExcerpt('app/highlight.directive.ts', 'highlight', '')
  :marked
    Maybe we don't want that property name inside the directive perhaps because it 
    doesn't express our intention well. 
    We can **alias** the `highlightColor` property with the attribute name by
    passing `myHighlight` into the `@Input` #{_decorator}:
    
    但我们可能在指令中不想要那样一个属性名，因为它不能很好的表示我们的意图。
    可以通过把`myHighlight`传给`@Input`#{_decoratorCn}来把这个属性名作为`highlightColor`属性的别名。
    
  +makeExcerpt('app/highlight.directive.ts', 'color', '')
  
:marked
  Now that we're getting the highlight color as an input, we modify the `onMouseEnter()` method to use
  it instead of the hard-coded color name.
  We also define red as the default color to fallback on in case
  the user neglects to bind with a color.
  
  现在，通过输入型属性得到了高亮的颜色，然后修改`onMouseEnter()`来使用它代替硬编码的那个颜色名。
  我们还把红色定义为默认颜色，以便在用户忘了绑定颜色时作为备用。
  
+makeExcerpt('attribute-directives/ts/app/highlight.directive.ts', 'mouse-enter', '')

:marked
  Now we'll update our `AppComponent` template to let 
  users pick the highlight color and bind their choice to our directive.
  
  我们这就更新`AppComponent`的模板，来让用户选择一个高亮颜色，并把选择结果绑定到指令上。
  
  Here is the updated template:
  
  这里是更新后的模板：

+makeExcerpt('attribute-directives/ts/app/app.component.html', 'v2', '')

.l-sub-section
  :marked
    ### Where is the templated *color* property?
    ### 模板的*color*属性在哪里？
    
    The eagle-eyed may notice that the radio button click handlers in the template set a `color` property
    and we are binding that `color` to the directive. 
    We should expect to find a `color` on the host `AppComponent`.
    
    眼尖的读者可能发现了，模板中的单选按钮的点击事件处理器设置了一个`color`属性，而且把`color`绑定到指令上。
    我们会期望在这个宿主`AppComponent`上发现一个`color`属性。
    
    **We never defined a color property for the host *AppComponent***!
    And yet this code works. Where is the template `color` value going?
    
    **但我们从来没有在宿主`AppComponent`上定义过color属性**！
    不过这段代码却能正常工作。模板中的`color`值哪去了？
    
    Browser debugging reveals that Angular dynamically added a `color` property 
    to the runtime instance of the `AppComponent`.
    
    在浏览器中调试就会发现，Angular在`AppComponent`的运行期实例上添加了一个`color`属性。
    
    This is *convenient* behavior but it is also *implicit* behavior that could be confusing. 
    While it's cool that this technique works, we recommend adding the `color` property to the `AppComponent`.
    
    这是一个*很便利的*行为，但它也是*隐式的*行为，这容易让人困惑。
    虽然这样也可行，但我们建议你还是要把`color`属性加到`AppComponent`中。

:marked
  Here is our second version of the directive in action.
  
  下面是指令操作演示的第二版。
figure.image-display
  img(src="/resources/images/devguide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2")

.l-main-section
:marked
  ## Bind to a second property
  ## 绑定到第二个属性
  Our directive only has a single, customizable property. What if we had ***two properties***?
  
  我们的指令只有一个可定制属性，如果有***两个***呢？
  
  Let's allow the template developer to set the default color, the color that prevails until the user picks a highlight color.
  We'll add a second **input** property to `HighlightDirective` called `defaultColor`:
  
  我们要让模板开发者设置一个默认颜色，直到用户选择了一个高亮颜色才失效。
  给`HighlightDirective`添加第二个**输入型**属性`defaultColor`：
+makeExample('attribute-directives/ts/app/highlight.directive.ts', 'defaultColor')(format=".")
:marked
  The `defaultColor` property has a setter that overrides the hard-coded default color, "red".
  We don't need a getter.
  
  `defaultColor`属性是一个setter函数，它代替了硬编码的默认颜色“red”。不需要getter函数。
  
  How do we bind to it? We already "burned" the `myHighlight` attribute name as a binding target.
  
  该如何绑定到它？别忘了已经把`myHighlight`属性名用作绑定目标了。
  
  Remember that a *component is a directive too*. 
  We can add as many component property bindings as we need by stringing them along in the template
  as in this example that sets the `a`, `b`, `c` properties to the string literals 'a', 'b', and 'c'. 
  
  记住，*组件也是指令*。
  只要需要，就可以通过把它们依次串在模板中来为组件添加多个属性绑定。
  下面这个例子中就把`a`、`b`、`c`属性设置为了字符串字面量'a', 'b', 'c'。
code-example(format="." ).
  &lt;my-component [a]="'a'" [b]="'b'" [c]="'c'">&lt;my-component>
:marked
  We do the same thing with an attribute directive.
  
  在属性型指令中也可以这样做。
+makeExample('attribute-directives/ts/app/app.component.html', 'defaultColor')(format=".")
:marked
  Here we're binding the user's color choice to the `myHighlight` attribute as we did before.
  We're *also* binding the literal string, 'violet', to the `defaultColor`.
  
  这里，我们像以前一样把用户选择的颜色绑定到了`myHighlight`上。
  我们*还*把字符串字面量'violet'绑定到了`defaultColor`上。
    
  Here is the final version of the directive in action.
  
  下面就是该指令最终版的操作演示。
figure.image-display
  img(src="/resources/images/devguide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight")

.l-main-section
:marked
  ## Summary
  ## 总结
  We now know how to

  现在，我们知道了该如何：
  - [build a simple **attribute directive** to attach behavior to an HTML element](#write-directive),
  - [构建一个简单的**属性型指令**来为一个HTML元素添加行为](#write-directive)，
  - [use that directive in a template](#apply-directive),
  - [在模板中使用那个指令](#apply-directive)，
  - [respond to **events** to change behavior based on an event](#respond-to-user),
  - [响应**事件**，以便基于事件改变行为](#respond-to-user)，
  - and [use **binding** to pass values to the attribute directive](#bindings).
  - 以及[使用**绑定**来把值传给属性型指令](#bindings)。

  The final source:

  最终的源码如下：
+makeTabs(
  `attribute-directives/ts/app/app.component.ts,
   attribute-directives/ts/app/app.component.html, 
   attribute-directives/ts/app/highlight.directive.ts,
   attribute-directives/ts/app/app.module.ts,
   attribute-directives/ts/app/main.ts,
   attribute-directives/ts/index.html
  `,
  ',,full',
  `app.component.ts,
   app.component.html,
   highlight.directive.ts,
   app.module.ts,
   main.ts,
   index.html
  `)


a#why-input
.l-main-section
:marked
  ### Appendix: Input properties
  ### 附录：Input属性
  
  Earlier we declared the `highlightColor` property to be an ***input*** property of our
  `HighlightDirective`
  
  之前, 我们曾把`highlightColor`定义为`HighlightDirective`指令的一个***input***属性。
 
  We've seen properties in bindings before. 
  We never had to declare them as anything. Why now?
  
  以前也见过属性绑定，但我们从没有定义过它们。为什么现在就不行了？
  
  Angular makes a subtle but important distinction between binding **sources** and **targets**.
  
  Angular在绑定的**源**和**目标**之间有一个巧妙但重要的区别。
  
  In all previous bindings, the directive or component property was a binding ***source***.
  A property is a *source* if it appears in the template expression to the ***right*** of the equals (=).
  
  在以前的所有绑定中，指令或组件的属性都是绑定***源***。
  如果属性出现在了模板表达式等号(=)的***右侧***，它就是一个*源*。
  
  A property is a *target* when it appears in **square brackets** ([ ]) to the **left** of the equals (=) ...
  as it is does when we bind to the `myHighlight` property of the `HighlightDirective`, 
  
  如果它出现在了**方括号**([ ])中，并且出现在等号(=)的**左侧**，它就是一个*目标*……
  就像在绑定到`HighlightDirective`的`myHighlight`属性时所做的那样。
+makeExample('attribute-directives/ts/app/app.component.html','pHost')(format=".")
:marked
  The 'color' in `[myHighlight]="color"` is a binding ***source***.
  A source property doesn't require a declaration.
  
  `[myHighlight]="color"`中的'color'就是绑定***源***。
  源属性不需要特别声明。
  
  The 'myHighlight' in `[myHighlight]="color"` *is* a binding ***target***.
  We must declare it as an *input* property.
  Angular rejects the binding with a clear error if we don't.
  
  `[myHighlight]="color"`中的'myHighlight'就是绑定***目标***。
  必须把它定义为一个*Input*属性，否则，Angular就会拒绝这次绑定，并给出一个明确的错误。
  
  Angular treats a *target* property differently for a good reason.
  A component or directive in target position needs protection.
  
  Angular这样区别对待*目标*属性有充分的理由。
  作为目标的组件或指令需要保护。
  
  Imagine that our `HighlightDirective` did truly wonderous things.
  We graciously made a gift of it to the world. 
  
  假想一下，`HighlightDirective`真是一个好东西。
  我们优雅的把它当作礼物送给全世界。
  
  To our surprise, some people &mdash; perhaps naively &mdash;
  started binding to *every* property of our directive. 
  Not just the one or two properties we expected them to target. *Every* property.
  That could really mess up our directive in ways we didn't anticipate and have no desire to support.
  
  出乎意料的是，有些人(可能因为太天真)开始绑定到这个指令中的*每一个*属性。
  不仅仅只是我们预期为绑定目标的那一两个属性，而是*每一个*。
  这可能会扰乱指令的工作方式 —— 我们既不想这样做也不想支持他们这样做。
  
  The *input* declaration ensures that consumers of our directive can only bind to
  the properties of our public API ... nothing else.
  
  于是，这种*输入*声明可以确保指令的消费者只能绑定到公开API中的属性，其它的都不行。