anchor.diff:    detaches it from DOM events (the attachments that it made) and destroys the component.
     The component can be garbage-collected (we hope) and free up memory.
   
  -
  +  而`ngIf`不同。
  +  把`ngIf`设置为假**将会**影响到组件的资源消耗。
  +  Angular会从DOM中移除该元素，停止相关组件的变更检测，把它从DOM事件中摘掉(事件是组件造成的附加项)，并销毁组件。
  +  组件会被垃圾回收(希望如此)并释放内存。
   
     Components often have child components which themselves have children.
     All of them are destroyed when `ngIf` destroys the common ancestor.
     This cleanup effort is usually a good thing.
   
  +  组件通常还有子组件，子组件还有自己的子组件。
  +  当`ngIf`销毁这个祖先组件时，它们全都会被销毁。
  +  这种清理工作通常会是好事。
  +
     Of course it isn't *always* a good thing.
     It might be a bad thing if we need that particular component again soon.
  +
  +  当然，它也并不*总是*好事。
  +  如果我们很快就会再次需要这个组件，它就变成坏事了。
   
     The component's state might be expensive to re-construct.
     When `ngIf` becomes `true` again, Angular recreates the component and its subtree.
     Angular runs every component's initialization logic again. That could be expensive ... as when
     a component re-fetches data that had been in memory just moments ago.
  +
  +  重建组件的状态可能是昂贵的。
  +  当`ngIf`重新变为`true`的时候，Angular会重新创建该组件及其子树。
  +  Angular会重新运行每个组件的初始化逻辑。那可能会很昂贵……比如当组件需要重新获取刚刚还在内存中的数据时。
   .l-sub-section
     :marked
       *Design thought*: minimize initialization effort and consider caching state in a
       companion service.
  +
  +    *设计思路*：要最小化初始化的成本，并考虑把状态缓存在一个伴生的服务中。
   :marked
     Although there are pros and cons to each approach,
     in general it is best to use `ngIf` to remove unwanted components rather than
     hide them.
   
  +  虽然每种方法都有各自的优点和缺点，但使用`ngIf`来移除不需要的组件通常都会比隐藏它们更好一些。
  +
     **These same considerations apply to every structural directive, whether built-in or custom.**
     We should ask ourselves &mdash; and the users of our directives &mdash; to think carefully
     about the consequences of adding and removing elements and of creating and destroying components.
   
  +  **同样的考量也适用于每一个结构型指令，无论是内建的还是自定义的。**
  +  我们应该让自己以及指令的使用者仔细考虑下添加元素、移除元素以及创建和销毁组件的后果。
  +
     Let's see these dynamics at work. For fun, we'll stack the deck *against*
     our recommendation and consider a component called `heavy-loader` that
     ***pretends*** to load a ton of data when initialized.
   
  +  让我们在实践中看看这些变化。为了好玩儿，我们设想在甲板上有个叫`heavy-loader`（重型起重机）的组件，它会***假装***在初始化时装载一吨数据。
  +
     We'll display two instances of the component.  We toggle the visibility of the first one with CSS.
     We toggle the second into and out of the DOM with `ngIf`.
  +
  +  我们将显示该组件的两个实例。我们使用CSS切换第一个实例的可见性，用`ngIf`把第二个实例添加到DOM和将其移除。
   
   +makeTabs(
       `structural-directives/ts/app/structural-directives.component.html,
  
positive.code:   using the built-in `ngOnInit` and `ngOnDestroy` [lifecycle hooks](lifecycle-hooks.html).
    Here it is in action:
  
  figure.image-display
    img(src='/resources/images/devguide/structural-directives/heavy-loader-toggle.gif' alt="heavy loader toggle")
  
  
negative.code:   structural directives like `ngFor` and `ngIf` and we
    wrote our own structural directive, `myUnless`, to do something similar.
  
    我们学会了通过像`ngFor`和`ngIf`这样的结构型指令来操纵HTML的布局。我们还写出了我们的第一个结构型指令`myUnless`来做类似的事情。
  
    Angular offers more sophisticated techniques for managing layout
    such as *structural components* that can take external content
    and incorporate that content within their own templates.
    Tab and tab pane controls are good examples.
  
    Angular提供了更多成熟的技术来管理布局，比如*结构性组件*可以接受外部内容，并把这些内容合并到组件自己的模板中。
    多页标签及其面板控件就是很好的例子。
  
    We'll learn about structural components in a future chapter.
  
    我们将在未来的章节中学到结构型指令。
  