anchor.diff:      td
         :marked
           After Angular projects external content into its view.
  +        
  +        在Angular投射外来内容到自己的视图后调用。
     tr(style=top)
       td ngAfterContentChecked
       td
         :marked
  -        After Angular checks the bindings of the external content that it projected into its view.
  +        After Angular checks the bindings of the external content that it projected into its view.#
  +        
  +        在Angular检查它投射到自己视图的外部内容的绑定后调用。
     tr(style=top)
       td ngAfterViewInit
       td
         :marked
           After Angular creates the component's view(s).
  +        
  +        在Angular新建组件的视图后调用。
     tr(style=top)
       td ngAfterViewChecked
       td
         :marked
           After Angular checks the bindings of the component's view(s).
  +        
  +        在Angular检查组件视图的绑定后调用。
   :marked
     Angular does not call the hook methods in this order.
  +  
  +  Angular不会按照上面的顺序调用这些钩子方法。
   
   a(id="hook-sequence")
   .l-main-section
   :marked
     ## Lifecycle sequence
  +  
  +  ## 生命周期顺序
  +  
     *After* Angular creates a component/directive by `new`-ing its constructor, 
  -  it calls the lifecycle hook methods in the following sequence at specific moments:  
  +  it calls the lifecycle hook methods in the following sequence at specific moments:
  +  
  +  Angular使用构造函数新建一个组件或指令后，它在特定的时刻按照下面的顺序调用生命周期钩子方法@  
   table(width="100%")
     col(width="20%")
     col(width="80%") 
  
positive.code:   Directive and component instances have a lifecycle
    as Angular creates, updates, and destroys them.
    
    指令和组件实例
  
    Developers can tap into key moments in that lifecycle by implementing
    one or more of the *Lifecycle Hook* interfaces in the Angular `core` library.
    
    Each interface has a single hook method whose name is the interface name prefixed with `ng`.
    For example, the `OnInit` interface has a hook method named `ngOnInit`.
    We might implement it in a component class like this:
  +makeExample('lifecycle-hooks/ts/app/peek-a-boo.component.ts', 'ngOnInit', 'peek-a-boo.component.ts (excerpt)')(format='.')
  :marked
    No directive or component will implement all of them and some of the hooks only make sense for components.
    Angular only calls a directive/component hook method *if it is defined*.
  block optional-interfaces
    .l-sub-section
      :marked
        ### Interface optional?
        The interfaces are optional for JavaScript and Typescript developers from a purely technical perspective.
        The JavaScript language doesn't have interfaces. 
        Angular can't see TypeScript interfaces at runtime because they disappear from the transpiled JavaScript.
  
        Fortunately, they aren't necessary.
        We don't have to add the lifecycle hook interfaces to our directives and components to benefit from the hooks themselves.
  
        Angular instead inspects our directive and component classes and calls the hook methods *if they are defined*.
        Angular will find and call methods like `ngOnInit()`, with or without the interfaces.
  
        Nonetheless, we strongly recommend adding interfaces to TypeScript directive classes
        in order to benefit from strong typing and editor tooling.  
    
  :marked
    Here are the component lifecycle hook methods:
  
    ### Directives and Components
  
  table(width="100%")
    col(width="20%")
  
negative.code:     td
        :marked
          before `ngOnInit` and when a data-bound input property value changes.
          
          当数据绑定输入属性的值变化时，在`ngOnInit`之前调用。
    tr(style=top)
      td ngOnInit
      td
        :marked
          after the first `ngOnChanges`.
          
          在第一个`ngOnChanges`时候调用。
    tr(style=top)
      td ngDoCheck
      td
        :marked
          during every Angular change detection cycle.
          
          在每个Angular变化监测周期中调用。
    tr(style=top)
      td ngAfterContentInit
      td
        :marked
          after projecting content into the component.
          
          投射内容到组件后调用。
    tr(style=top)
      td ngAfterContentChecked
      td
        :marked
           after every check of projected component content.
           
           每次检查被投射的组件内容之后调用。
    tr(style=top)
      td ngAfterViewInit
      td
        :marked
          after initializing the component's views and child views.
          
          初始化组件视图和子视图之后调用。
    tr(style=top)
      td ngAfterViewChecked
      td
        :marked
           after every check of the component's views and child views.
           
           每次检查组件视图和子视图之后调用。
    tr(style=top)
      td ngOnDestroy
      td
        :marked
           just before Angular destroys the directive/component.
           
           在Angular销毁指令和组件之前调用。
  
  a(id="other-lifecycles")
  .l-main-section
  :marked
    ## Other lifecycle hooks
    
    ## 其他生命周期钩子
    
    Other Angular sub-systems may have their own lifecycle hooks apart from the component hooks we've listed. 
    The router, for instance, also has it's own [router lifecycle hooks](router.html#router-lifecycle-hooks)
    that allow us to tap into specific moments in route navigation.
    
    其他Angular子系统除了有我们已经列出来的组件钩子外，可能有它们自己的生命周期钩子。比如路由器，它有自己的[路由器生命周期钩子](router.html#router-lifecycle-hooks)，
    为我们提供了插入到特定的路由浏览时刻的能力。
    
    A parallel can be drawn between `ngOnInit` and `routerOnActivate`. 
    Both are prefixed so as to avoid collision, and both run right when a component is 'booting' up.
    
    一对平衡线可以在`ngOnInit`和`routerOnActivate`之间被划出来。两种都有前缀用来防止冲突，两者都是在一个组件刚刚“启动”时被调用。
    
    3rd party libraries might implement their hooks as well in order to give us, the developers, more
    control over how these libraries are used.
    
    第三方库也可能实现它们自己的钩子，用来给我们开发者提供更多如何使用它们的控制。
  
  a#the-sample
  .l-main-section
  h2 Lifecycle exercises
  
  h2 生命周期练习
  p.  
    The #[+liveExampleLink()]
    demonstrates the lifecycle hooks in action through a series of exercises
    presented as components under the control of the root `AppComponent`.
    
    #[+liveExampleLink()] 通过一些在根组件`AppComponent`控制下的组件的练习，演示了生命周期钩子的运作。
    
  :marked
    They follow a common pattern:  a *parent* component serves as a test rig for 
    a *child* component that illustrates one or more of the lifecycle hook methods.
    
    它们遵循了一个常用的模式：一个*子级*组件演示一个或多个生命周期钩子方法，一个*父级*组件被当作该*子级*组件的测试台。
    
    Here's a brief description of each exercise: 
    
    下面是每个练习简短的描述：
  
  table(width="100%")
    col(width="20%")
    col(width="80%") 
    tr
      th Component 组件
      th Description 描述
    tr(style=top)
      td <a href="#peek-a-boo">Peek-a-boo</a>
      td
        :marked
          Demonstrates every lifecycle hook.
          Each hook method writes to the on-screen log.
          
          展示每个生命周期钩子，每个钩子方法在屏幕上显示日志。
    tr(style=top)
      td <a href="#spy">Spy</a>
      td
  