angular 内容的显示和隐藏： component.ts变量控制＜span＞内容显示隐藏 ng-show/ng-hide/ng-if/ng-switch,hidden

显示和隐藏元素是, Angular是通过修改数据模型DOM的方式来驱动UI刷新，然后通过指令把变更反应到UI上。

一 ： 用ng

ngIf,ngFor… 在angular里被称为是结构型指令.所谓结构型指令,就是它能够塑造或重塑DOM的结构. 说句话就是在渲染的时候它能够帮你增加,删除,维护这些元素.

ng-show/ng-hide:
ng-show是满足条件就展示,ng-hide是满足条件就隐藏.
因为 它们用法差不多,所以下面就单纯讲ng-show.
ng-show接收的是一个boolean值,当为值true的时候就去展示DOM节点,当值为false的时候,在dom节点上就添加一个ng-hide的类,这个类的样式是"display:none".
在DOM节点被加载的时候,ng-show里面的所有节点都会被加载,也就是说ng-show仅仅是隐藏和显示DOM节点而已.也就说当存在很多ng-show指令时候,即使它们不显示,但是它们所在的DOM节点还是会被浏览器渲染的.

ng-switch:
ng-switch要先监听一个变量,当此变量为什么值的时候下面就显示什么内容.
举个例子:
ng-switch监听了一个type这么一个变量,当type的值等于"a"的时候,那么这块区域就会被创建并显示;当type的值为"b"的时候,这块区域(a所控制的区域)就会被销毁,然后"b"所控制的那个区域(dom)就会被创建并且显示.

ng-if:
也是接收一个bool值,当值为false时,它所控制的节点并不会被创建,也可以说之前的DOM节点会被销毁掉,哪怕这个节点里面包含有很ng指令的绑定都不会去执行.
所以在我们的项目中,如果没有必要一次性生成完所有的dom,