anchor.diff:  .l-main-section
   :marked
     ## Break circularities with a forward class reference (*forwardRef*)
  +  ## 使用一个转寄类引用(*forwardRef*)来来打破循环
     
     The order of class declaration matters in TypeScript.
     We can't refer directly to a class until it's been defined.
  +  
  +  在TypeScript里面，类声明的顺序是有重要关系的。在一个类没有被定义之前，我们不能引用它。
     
     This isn't usually a problem, especially if we adhere to the recommended *one class per file* rule.
     But sometimes circular references are unavoidable. 
     We're in a bind when class 'A refers to class 'B' and 'B' refers to 'A'.
     One of them has to be defined first. 
     
  +  它通常不是一个问题，特别是当我们遵循*一个类一个文件*规则的时候。
  +  但是有时候循环引用可能不能避免。当一个类*A引用类B*，同时'B'引用'A'的时候，我们就遇到困境了：它们中间的一个必须要先定义。
  +  
     The Angular `forwardRef` function creates an *indirect* reference that Angular can resolve later.
     
  +  Angular的`forwardRef`函数建立一个*间接地*引用，Angular可以随后解析。
  +  
     The *Parent Finder* sample is full of circular class references that are impossible to break.
     
  +  这个*父级寻找器*例子是到处都是类循环引用，我们无法打破。
  +  
     In the [*Alex/Cathy* example](#known-parent) above:
  +  
  +  在上面的[*Alex/Cathy*例子](#known-parent)中：
     
     * the `AlexComponent` lists the `CathyComponent` in its component metadata `directives` array
     so it can display *Cathy* in its template.
     
  +  * `AlexComponent`在它的组件元数据`指令`数值里面列出`CathyComponent`，这样它可以在自己的模板中显示*Cathy*。
  +  
     * the `CathyComponent` constructor injects the parent `AlexComponent` which means that the `alex` parameter
     of its constructor has the `AlexComponent` type.
     
  +  * `CathyComponent`的构造函数注入父级`AlexComponent`，这样的话，构造函数参数`alex`是`AlexComponent`类型。
  +  
     *Alex* refers to *Cathy* and *Cathy* refers to *Alex*. We're stuck. We must define one of them first. 
     
  -  We defined *Alex* first and built its `C_DIRECTIVES` array with a forward reference to *Cathy*: 
  +  *Alex* 引用了*Cathy*，同时，*Cathy*引用了*Alex*。我们被卡住了。我们必须要先它们中的一个。
  +  
  +  We defined *Alex* first and built its `C_DIRECTIVES` array with a forward reference to *Cathy*:
  +  
  +  我们先定义了*Alex*，使用一个*Cathy*的转寄引用，建筑了它的`C_DIRECTIVES`数值：
   +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','C_DIRECTIVES','parent-finder.component.ts (C_DIRECTIVES)')(format='.')
   :marked
   .l-sub-section
  
positive.code: a(id="parent-token")
  :marked
    ### The *Parent* class-interface
    We [learned earlier](#class-interface) that a *class-interface* is an abstract class used as an interface rather than as a base class.
  
    Our example defines a `Parent` *class-interface* .
  +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','parent','parent-finder.component.ts (Parent class-interface)')(format='.')
  :marked
    The `Parent` *class-interface* defines a `name` property with a type declaration but *no implementation*., 
    The `name` property is the only member of a parent component that a child component can call.
    Such a narrowing interface helps decouple the child component class from its parent components.
    
    A component that could serve as a parent *should* implement the *class-interface* as the `AliceComponent` does:
  +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alice-class-signature','parent-finder.component.ts (AliceComponent class signature)')(format='.')
  :marked
    Doing so adds clarity to the code.  But it's not technically necessary. 
    Although the `AlexComponent` has a `name` property (as required by its `Base` class) 
    its class signature doesn't mention `Parent`:
  +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alex-class-signature','parent-finder.component.ts (AlexComponent class signature)')(format='.')
  .l-sub-section
    :marked
      The `AlexComponent` *should* implement `Parent` as a matter of proper style. 
      It doesn't in this example *only* to demonstrate that the code will compile and run without the interface 
      
  a(id="provideparent")
  :marked
    ### A *provideParent* helper function
    
    Writing variations of the same parent *alias provider* gets old quickly, 
    especially this awful mouthful with a [*forwardRef*](#forwardref):
  +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alex-providers')(format='.')
  :marked
    We can extract that logic into a helper function like this:
  +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','provide-the-parent')(format='.')
  :marked
    Now we can add a simpler, more meaningful parent provider to our components:
  +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alice-providers')(format='.')
  :marked
    We can do better. The current version of the helper function can only alias the `Parent` *class-interface*.
    Our application might have a variety of parent types, each with its own *class-interface* token.
    
    Here's a revised version that defaults to `parent` but also accepts an optional second parameter for a different parent *class-interface*.
  +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','provide-parent')(format='.')
  :marked
    And here's how we could use it with a different parent type:
  +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','beth-providers')(format='.')
  :marked
  
  
negative.code: :marked
    It's identical to *Carol*'s constructor except for the additional `@SkipSelf` decorator.
    
    除了添加了一个额外的`@SkipSelf`外，它和*Carol*的构造函数一样。
    
    `@SkipSelf` is essential for two reasons:
    
    使用`@SkipSelf`主要是为了下面两个原因：
     
    1. It tell the injector to start its search for a `Parent` dependency in a component *above* itself,
    which *is* what parent means.
    
    1. 它告诉注入器从一个在自己*上面*的组件开始搜索一个`Parent`依赖。
    
    2. Angular throws a cyclic dependency error if we omit the `@SkipSelf` decorator.
    
    2. 如果我们缺少`@SkipSelf`装饰器的话，Angular会抛出一个循环依赖错误。
    
      `Cannot instantiate cyclic dependency! (BethComponent -> Parent -> BethComponent)`
      
      `不能创建循环依赖实例！(BethComponent -> Parent -> BethComponent)`
  
    Here's *Alice*, *Barry* and family in action:
    
    这里是*Alice*，*Barry*和该家庭的实际代码：
  
  figure.image-display
    img(src="/resources/images/cookbooks/dependency-injection/alice.png" alt="Alice in action")
  