anchor.diff:    [`@Component`](../api/core/index/Component-decorator.html) decorator function whose
     argument is an object literal with metadata properties.
   
  +  当用 _TypeScript_ 或 _带装饰器的 ES6_ 编写代码时，使用一个或多个*装饰器 (decorator)* 来修饰类，
  +  提供配置和元数据。
  +
     In _plain ES6_, you provide metadata by attaching an `annotations` array to the _class_.
     Each item in the array is a new instance of a metadata decorator created with a similar metadata object literal.
  -  
  +
  +  在_普通 ES6_ 中，通过向_类_附加一个`annotations`数组来提供元数据。
  +
     In _ES5_, you also provide an `annotations` array but you attach it to the _constructor function_ rather than to a class.
   
  +  在_ES5_中，也是提供一个`annotations`数组，但把它附加到_构造函数_，而不是类。
  +
     See these variations side-by-side:
   
  +  看一下这些变种：
   +makeTabs(`
       cb-ts-to-js/ts/app/hero.component.ts,
       cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
  
positive.code:   code examples to _ES6_ and to _ES5_ so that JavaScript developers
    can read and write Angular apps in their preferred dialect.
  
  a#toc
  :marked
    ## Table of contents
  
    [_TypeScript_ to _ES6_ to _ES5_](#from-ts)<br>
    [Modularity: imports and exports](#modularity)<br>
    [Classes and Class Metadata](#class-metadata)<br>
    [_ES5_ DSL](#dsl)<br>
    [Interfaces](#interfaces)<br>
    [Input and Output Metadata](#io-decorators)<br>
    [Dependency Injection](#dependency-injection)<br>
    [Host Binding](#host-binding)<br>
    [View and Child Decorators](#view-child-decorators)<br>
    [AoT compilation in _TypeScript_ Only](#aot)<br>
  
    **Run and compare the live <live-example name="cb-ts-to-js">_TypeScript_</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
    code shown in this cookbook.**
  
  a#from-ts
  .l-main-section
  :marked
    ## _TypeScript_ to _ES6_ to _ES5_
    
    _TypeScript_ 
    <a href="https://www.typescriptlang.org" target="_blank" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
    &nbsp; _ES6 JavaScript_ is a superset of _ES5 JavaScript_. &nbsp; _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
    The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
  
    The downgrade progression is
    * _TypeScript_ to _ES6-with-decorators_
    * _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_")
    * _ES6-without-decorators_ to _ES5_
  
    When translating from _TypeScript_ to _ES6-with-decorators_, remove 
    [class property access modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
  
negative.code: :marked
    ## Input and Output Metadata
  
    ## 输入和输出元数据
  
    ### Input and Output Decorators
  
    ### 输入和输出装饰器
  
    In _TypeScript_ and _ES6-with-decorators_, you often add metadata to class _properties_ with _property decorators_.
    For example, you apply [`@Input` and `@Output` property decorators](../guide/template-syntax.html#inputs-outputs) 
    to public class properties that will be the target of data binding expressions in parent components.
  
    在 _TypeScript_ 和 _带装饰器的 ES6_ 中，经常会用_属性装饰器_往类的_属性_上添加元数据。
    例如，向公共类属性添加[`@Input`和`@Output`属性装饰器](../guide/template-syntax.html#inputs-outputs) ，
    会使这些属性成为父组件绑定表达式的目标。
  
    There is no equivalent of a property decorator in _ES5_ or _plain ES6_. 
    Fortunately, every property decorator has an equivalent representation in a class decorator metadata property.
    A _TypeScript_ `@Input` property decorator can be represented by an item in the `Component` metadata's `inputs` array.
  
    在 _ES5_ 或 _普通 ES6_ 中，没有等价的属性装饰器。
    幸运的是，每个属性装饰器在类的装饰器元数据属性中有等价的表示形式。
    _TypeScript_ 的`@Input`属性装饰器可以表示为`Component`元数据的`inputs`数组中的一项。
  
    You already know how to add `Component` or `Directive` class metadata in _any_ JavaScript dialect so
    there's nothing fundamentally new about adding another property. 
    But note that what would have been _separate_ `@Input` and `@Output` property decorators for each class property are
    combined in the metadata `inputs` and `outputs` _arrays_.
  
    你已经知道如何用_任意的_ JavaScript 方言添加`Component` 或 `Directive`元数据，
    所以添加另一个属性也没什么新鲜的。
    但要注意的是，用于每个类属性的那些_分离_的`@Input`和`@Output`属性装饰器，都合并到了`inputs`和`outputs`_数组_中。
  
  +makeTabs(`
      cb-ts-to-js/ts/app/confirm.component.ts,
  