angular2的指令标签如何才会被替换？

Question

题目描述可能不准确，请原谅，我是刚学NG2的新手。

场景还原：
这是 angular2.4.3 + angular-cli 做的小demo，我定义了一个组件类：

@Component({
  selector: 'side-bar',
  template: `
    <div class="side-left">
      <div>
        <header>
          <h1>ng-movie</h1>
          <h4 (click)="hideSidebar()">点击此处隐藏container</h4>
        </header>
      </div>
    </div>
    `
})
export class sideBarComponent{
  isHideContainer: bollean; // 准备用于控制 container 显示与否，通过 *ngIf
  hideSidebar () {
    // 如何把 div.side-bar 隐藏？
  }
}

在 angular2 中，我无法把组件中的数据isHideContainer添加在<side-bar></side-bar>上，因为这已经跨组件了，需要用到组件通信。

问题：
问题一：到这里我就很疑惑了，我认为<side-bar></side-bar>也应该算是组件的一部分，为什么需要组件通信才能对它进行控制？因为我之前学过vue.js，在vue中这问题是不存在的，它会把container元素替换成template，而不是像angular2把template嵌入到container中。

问题二：运行ng build --prod --env=prod后，<side-bar></side-bar>标签还保留着，没有替换成<div></div>，是否故意保留的？

Answer 1

写了个在线demo

http://embed.plnkr.co/veU7rSv...

核心代码：

@Component({
  selector: 'my-app',
  template: `
  <div class="side-left" *ngIf="isHideContainer">
      <div>
        <header>
          <h1>ng-movie</h1>
          <h4 (click)="hideSidebar()">点击此处隐藏container</h4>
        </header>
      </div>
    </div>
    `
})
export class AppComponent { 
  isHideContainer: bollean = true; // 准备用于控制 container 显示与否，通过 *ngIf
  hideSidebar() {
    this.isHideContainer = false;
  }
}

Answer 2

两个问题，其实都是在说一个问题 组件。

在Angular应用中是以组件树来组织的，每一个组件都是非常内聚、单一、可测试的。但凡有软件工程的经验，这三点是非常重要的。

而这三点最核心的是数据流向问题，为什么组件之间的通信是依赖于入、出就是出于这一点。

其次，如果你了解Web Components你就会知道 <side-bar> 所代表远比 <div> 更有含义，或许你可以再了解点Shadow DOM，标签的意义简直就是逆天。