Angular学习笔记（一）

内置指令

一、*ngIf：根据表达式的结果，显示/隐藏一个元素。

<div *ngIf="false">我被永远隐藏了</div><div *ngIf="a>b">当 a > b 时我才能被看见</div>

二、*ngFor：重复一个给定的DOM元素，依次从数组中取一个值作为当前元素的某变量值

<ul *ngFor="let person of persons; let num = index">    <li>第{{ num+1 }}号选手信息：</li>    <li>姓名: {{ person.name }}<li>    <li>年龄: {{ person.age }}<li>    <li>性别: {{ person.gender }}<li></ul><span>    假设persons是一个存有多个Person实例的数组，则上面的代码是生成多个ul，每个ul取persons的不同值作为参数。    而num=index是获取每个person在persons中的索引值，依旧是从0开始。其中num是自定义变量名，而index是固定的名字。</span>

三、[ngSwitch]、*ngSwitchCase、*ngSwitchDefault：和其它语言的switch效果基本一致，目的是为了避免繁琐的*ngIf。

<div [ngSwitch]="expression">    <div *ngSwitchCase="case1">结果1</div>    <div *ngSwitchCase="case2">结果2</div>    <div *ngSwitchDefault>可选的默认结果</div></div>

四、ngStyle：通过表达式给特定的DOM元素设置CSS属性

1. 通过[style.css-property]=”value”直接指定某个特定属性值

<div [style.background-color]="yellow">我的背景是黄色的</div><div [style.font-size.px]="12">我的字号是12px，单位需要自己指定</div>

2. 通过ngStyle属性，使用k-v对设置每个属性

<div [ngStyle]="{color:'white', 'font-size':24, 'background-color':'blue'}">    我的字是白色的，字号是24px，背景色是蓝色。    注意：    ngStyle的参数是一个JavaScript对象，其键名必须是字符串或者有效的标识符。    因为color是一个合法的键名，可以不需要引号。    而像font-size、background-color中的连字符（即破折号）是不允许出现在对象的键名当中的，所以需要用引号引起来。</div>

五、ngClass：动态设置元素的class属性

1. 通过字符串设置

<div [ngClass]="'bordered highlight'">    为该div添加bordered和highlight这两个已定义的class。</div>

2. 通过数组设置

<div [ngClass]="['bordered', 'highlight']">    为该div添加bordered和highlight这两个已定义的class。</div>

3. 通过对象字面量设置

<div [ngClass]="{bordered:false, highlight:true}">    bordered和highlight是两个已定义的class名。则bordered不生效，而highlight生效。    其中的true和false可以通过布尔型变量或能够返回布尔值的方法动态判断，实现class的动态添加。</div>

六、ngNonBindable：告诉Angular不要编译或者绑定页面中的某个指定的部分

<div ngNonBindable>    {{ plain }}：使用ngNonBindable以后，则这个div内的模板语法等就不会生效，呈现出来的就是单纯的文本。</div>

本文主要参照：《Angular权威教程》（Nice Angular社区 译版）以及网上搜索的其它的一些资料