Angular权威教程之内置指令篇

过了一个"憋"屈的五一假期，Angular权威教程的路还需要继续走啊。
let`s go。今天来简单了解一下angular的内置指令。

ngIf：

根据ngIf中的值来决定是否显示或不显示一个元素。

ngSwitch：

类似于其他语言的switch语句。

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

Default默认值，其他特殊值ngSwitchCase来处理

ngStyle：

[style.<cssproperty>]="value"的形式引入：

 <div [style.background-color]="'red'">        
  Uses fixed red background       
 </div> 

键值对形式引入：

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

动态引入：

a.定义两个输入框：

 <div class="ui input">         
 <input type="text" name="color" value="{{color}}" #colorinput>       </div> 
 
 <div class="ui input">         
 <input type="text" name="fontSize" value="{{fontSize}}" #fontinput>       </div> 

b.基于输入框的值来设定字体大小：

 <div>       
 <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">         
 red text       
 </span>     
 </div> 

c.基于输入框的值来设定颜色：

 <h4 class="ui horizontal divider header">       
 ngStyle with object property from variable     
 </h4> 
 
  <div>       
   <span [ngStyle]="{color: color}">         
   {{ color }} text       </span>     
  </div> 
 
  <h4 class="ui horizontal divider header">       
  style from variable     
  </h4> 
 
  <div [style.background-color]="color"          style="color: white;">       
  {{ color }} background     
  </div> 

存在疑惑：动态传输的时候的值命名和引用的名称为何不统一。

ngClass：

ngClass和ngStyle不同点是在于：
前者为类层次的，后者为属性层次的

括号中键值对，第一个为类名称，第二个为Boolean值：

  <div [ngClass]="{bordered: false}">This is never bordered</div>   
  <div [ngClass]="{bordered: true}">This is always bordered</div> 

动态指令：

<div [ngClass]="{bordered: isBordered}">    
 Using object literal. Border {{ isBordered ? "ON" : "OFF" }}   </div> 

ngFor ：

渲染元素：

*ngFor ="let item of items"

for example：

 this.cities = ['Miami', 'Sao Paulo', 'New York']; 

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

将会依次渲染出cities的每个城市。

渲染表格

this.people = 
 [       
 { name: 'Anderson', age: 35, city: 'Sao Paulo' },       
 { name: 'John', age: 12, city: 'Miami' },       
 { name: 'Peter', age: 22, city: 'New York' }     
 ];

 <table class="ui celled table">     
 <thead>       
 <tr>         
 <th>Name</th>         
 <th>Age</th>         
 <th>City</th>       
 </tr>     
 </thead>     
 <tr *ngFor="let p of people">       
 <td>{{ p.name }}</td>       
 <td>{{ p.age }}</td>       
 <td>{{ p.city }}</td>     
 </tr>   
 </table> 

ngNonBindable：

不要编译或者绑定

 template: 
 `   
 <div class='ngNonBindableDemo'>     
 <span class="bordered">{{ content }}</span>     
 <span class="pre" ngNonBindable>       
 &larr; This is what {{ content }} rendered     
 </span>   
 </div>  
  `

当设置上ngNonBindable属性时，就不会对这个元素进行编译，所以最后不会渲染content的值，则会直接显示content本身