第四章 Angular内置指令

ngIf

1. 根据一个条件来决定显示或隐藏一个元素，这个条件是由传给指令的表达式的结果决定的。

2. 如果表达式的结果返回的是一个假值，那么元素会从DOM上被移除。

<div *ngIf="false"> </div>
<div *ngIf="a>b"> </div>
<div *ngIf="fstr=='yes'"> </div>
<div *ngIf="myFunc()"> </div>

ngSwitch

1. 根据一个给定的条件来渲染不同的元素。
2. 思想：对表达式进行一次求值，然后根据其结果决定如何显示指令内的嵌套元素。
3. 结果：
   • 使用ngSwitchCase指令描述已知结果。
   • 使用ngSwitchDefault指令处理其它所有未知情况。
   • ngSwitchDefault元素是可选的，如果不用它，当myVar没有匹配到任何期望的值时，就不会渲染任何东西。
   • 也可以为不同的元素声明同样的ngSwitchDefault值，这样就可以多次匹配同一个值了。

<div class="container" [ngSwitch]="myVar">
  <div *ngSwitchCase="'A'"></div>
  <div *ngSwitchCase="'B'"></div>
  <div *ngSwitchDefault></div>
</div>

ngStyle

1. 给特定的DOM元素设定css样式
2. 用法：[style.<cssproperty>]=value
3. 用法：[ngStyle]="{ }"

<div [style.background-color] ="'yellow'">
  
</div>

<div [ngStyle]="{color: 'white', 'background-color: 'blue'}">
  
</div>

ngClass

1. 动态设置和改变一个给定dom元素的css类
2. 用法：传入一个对象字面量，该对象希望以类名作为键，而值应该是一个用来表明是否应该应用该类的真/假值。
3. 用法：使用一个类名列表来指定哪些类名会被添加到元素上。

<div [ngClass]="{bordered : isBordered}">
  
</div>

<div [ngClass]="[ 'blue','round']">
  
</div>

ngFor

1. 重复一个给定的dom元素（或一组dom元素），每次重复都会从数组中取一个不同的值。
2. 语法：*ngFor="let item of items"
   • let item语法指定一个用来接收items数组中每个元素的模板变量。
   • items是来自组件控制器的一组项的集合。

<div *ngFor="let c of cities">
  <div class="item">
    {{c}}
  </div>
</div>

<h4 class="ui horiaontal divider header">
  	Nested data
</h4>
<div *ngFor="let item of peopleByCity"> 
  	<h2>
      {{item.city}}
     </h2>
      <table>
        <thead>
        		<tr><th>Name</th><th>Age</th></tr>
        </thead>
        <tbody>
        		<tr *ngFor="let p of item.people" ;let i = index>
          			<td>{{p.name}}</td>
              		<td>{{p.age}}</td>
          	</tr>
        </tbody>
  </table>
</div>

ngNonBindable

1. 不要编译或者绑定页面中的某个特殊部分时。

<div ngNonBindable>  	{{content}}</div>