码迷,mamicode.com
首页 > 其他好文 > 详细

ng-book札记——内置指令

时间:2018-04-02 23:57:05      阅读:354      评论:0      收藏:0      [点我收藏+]

标签:let   head   逻辑   ade   iter   demo   property   rip   fixed   

Angular提供了一些内置指令(directive),这些添加在HTML元素(element)上的特性(attribute)可以赋予更多的动态行为。

NgIf

ngIf指令用于在某个条件下显示或者隐藏元素,该条件取决于传入指令的表达式的结果。

<div *ngIf="false"></div> <!-- 永远不显示 -->
<div *ngIf="a > b"></div> <!-- a大于b时显示 -->
<div *ngIf="str == ‘yes‘"></div> <!-- str等于"yes"时显示 -->
<div *ngIf="myFunc()"></div> <!-- myFunc返回true时显示 -->

NgSwitch

ngSwitch指令用于处理更复杂的显示逻辑。

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

ngSwitchDefault为可选项,如果不加上它,且找不到匹配项时,没有内容将在页面上渲染出来。

NgStyle

ngStyle指令最简洁的方式是[style.<cssproperty>]="value"这样的形式。

<div [style.background-color]="‘yellow‘">
  Uses fixed yellow background
</div>

另一种方法,采用了键值组合的形式:

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

NgClass

ngClass指令也是一种设置样式的方式,同样也有两种设置办法。
第一种是传递对象字面量(object literal),对象的键是样式的类名,值为布尔类型,指明是否应用样式类。

.bordered {
  border: 1px dashed black;
  background-color: #eee; 
}
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>

另一种是直接指定样式类名。

<div class="base" [ngClass]="[‘blue‘, ‘round‘]">
  This will always have a blue background and
  round corners
</div>

ngClass中添加的样式类会与HTML的class特性中已有样式合并,成为最终的‘class‘结果。
技术分享图片

NgFor

ngFor指令用于迭代集合项,其语法为*ngFor="let item of items"
let item语法指定每次迭代的元素,items是集合项。
ngFor指令中的集合项可以是对象的数组。

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

同时还支持嵌套:

<h4 class="ui horizontal divider header">
  Nested data
</h4>

<div *ngFor="let item of peopleByCity">
  <h2 class="ui header">{{ item.city }}</h2>

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

在要获得索引的场合下,只需要稍加变化。

<div class="ui list" *ngFor="let c of cities; let num = index">
  <div class="item">{{ num+1 }} - {{ c }}</div>
</div>

NgNonBindable

ngNonBindable指令负责通知Angular,页面上的某块区域不用额外编译。

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

上述例子中,第二个span区块里的内容不会被Angualr编译。

ng-book札记——内置指令

标签:let   head   逻辑   ade   iter   demo   property   rip   fixed   

原文地址:https://www.cnblogs.com/kenwoo/p/8698427.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!