anchor.diff:      We can also alias property names in the `inputs` and `outputs` arrays.
       We write a colon-delimited (`:`) string with
       the directive property name on the *left* and the public alias on the *right*:
  +    
  +    我们也能在`inputs`和`outputs`数组中为属性指定别名。
  +    我们可以写一个冒号（`:`）分隔的字符串， *左侧* 是指令中的属性名， *右侧* 则是公开的别名。
     +makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-2')(format=".")
   
   // #docregion expression-operators
  
positive.code: :marked
    <a id="safe-navigation-operator"></a>
    ### The safe navigation operator ( ?. ) and null property paths
  
    The Angular **safe navigation operator (`?.`)** is a fluent and convenient way to guard against null and undefined values in property paths.
    Here it is, protecting against a view render failure if the `currentHero` is null.
  // #enddocregion expression-operators-safe-1
  +makeExample('template-syntax/ts/app/app.component.html', 'safe-2')(format=".")
  // #docregion expression-operators-safe-2
  :marked
    Let’s elaborate on the problem and this particular solution.
  
    What happens when the following data bound `title` property is null?
  // #enddocregion expression-operators-safe-2
  +makeExample('template-syntax/ts/app/app.component.html', 'safe-1')(format=".")
  // #docregion expression-operators-safe-3
  :marked
    The view still renders but the displayed value is blank; we see only "The title is" with nothing after it.
    That is reasonable behavior. At least the app doesn't crash.
  
    Suppose the template expression involves a property path, as in this next example
    where we’re displaying the `firstName` of a null hero.
  
  code-example(format="" language="html").
    The null hero's name is {{nullHero.firstName}}
  // #enddocregion expression-operators-safe-3
  // #docregion expression-operators-safe-4
  :marked
    JavaScript throws a null reference error, and so does Angular:
  code-example(format="" language="html").
    TypeError: Cannot read property 'firstName' of null in [null]
  // #enddocregion expression-operators-safe-4
  // #docregion expression-operators-safe-5
  :marked
    Worse, the *entire view disappears*.
  
    We could claim that this is reasonable behavior if we believed that the `hero` property must never be null.
    If it must never be null and yet it is null,
    we've made a programming error that should be caught and fixed.
    Throwing an exception is the right thing to do.
  
    On the other hand, null values in the property path may be OK from time to time,
    especially when we know the data will arrive eventually.
  
    While we wait for data, the view should render without complaint, and
    the null property path should display as blank just as the `title` property does.
  
    Unfortunately, our app crashes when the `currentHero` is null.
  
    We could code around that problem with [NgIf](#ngIf).
  // #enddocregion expression-operators-safe-5
  +makeExample('template-syntax/ts/app/app.component.html', 'safe-4')(format=".")
  // #docregion expression-operators-safe-6
  :marked
    Or we could try to chain parts of the property path with `&&`, knowing that the expression bails out
    when it encounters the first null.
  // #enddocregion expression-operators-safe-6
  +makeExample('template-syntax/ts/app/app.component.html', 'safe-5')(format=".")
  // #docregion expression-operators-safe-7
  :marked
    These approaches have merit but can be cumbersome, especially if the property path is long.
    Imagine guarding against a null somewhere in a long property path such as `a.b.c.d`.
  // #enddocregion expression-operators-safe-7
  // #docregion expression-operators-safe-8
  :marked
    The Angular safe navigation operator (`?.`) is a more fluent and convenient way to guard against nulls in property paths.
    The expression bails out when it hits the first null value.
    The display is blank, but the app keeps rolling without errors.
  // #enddocregion expression-operators-safe-8
  +makeExample('template-syntax/ts/app/app.component.html', 'safe-6')(format=".")
  // #docregion expression-operators-safe-9
  :marked
    It works perfectly with long property paths such as `a?.b?.c?.d`.
  // #enddocregion expression-operators-safe-9
  
  // #docregion summary
  .l-main-section
  :marked
    ## Summary
    We’ve completed our survey of template syntax. Now it's time to put that knowledge to work as we write our own components and directives.
  // #enddocregion summary
  
negative.code:   Both `HeroDetailComponent.hero` and `HeroDetailComponent.deleteRequest` are on the **left side** of binding declarations.
    `HeroDetailComponent.hero` is inside brackets; it is the target of a property binding.
    `HeroDetailComponent.deleteRequest` is inside parentheses; it is the target of an event binding.
    
    `HeroDetailComponent.hero`和`HeroDetailComponent.deleteRequest`都在绑定声明的 **左侧** 。
    `HeroDetailComponent.hero`在方括号中，它是一个属性绑定的目标。
    `HeroDetailComponent.deleteRequest`在圆括号中，它是一个事件绑定的目标。
  
    ### Declaring input and output properties
    ### 声明输入和输出属性
    Target properties must be explicitly marked as inputs or outputs.
    
    目标属性必须被显式的标记成输入或输出。
  
    When we peek inside `HeroDetailComponent`, we see that these properties are marked
    with decorators as input and output properties.
    
    当我们深入`HeroDetailComponent`内部，我们看到这些属性被装饰器标记成了输入和输出属性。
  // #enddocregion inputs-outputs-3
  +makeExample('template-syntax/ts/app/hero-detail.component.ts', 'input-output-1')(format=".")
  
  