简介
内置指令是已经导入过的，你的组件可以直接使用它们。 因此，不用像你自己的组件一样把它们作为指令导入进来。
ngIf
根据一个条件来决定显示或隐藏一个元素， 可以使用 ngIf 指令。这个条件是由你传给指令的表达式的结果决定的
<div ngIf="false"></div>
<div ngIf="a > b"></div>
<div ngIf="str == 'yes'"></div>
<div ngIf="myFunc()"></div>
ngSwitch
根据一个给定的条件来渲染不同的元素
// ngSwitchCase 指令描述已知结果；
// ngSwitchDefault 指令处理所有其他未知情况
// ngSwitchDefault 元素是可选的。如果我们不用它，
// 那么当 myVar 没有匹配到任何期望的值时就不会渲染任何东西
<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>
// 想要处理新值 C， 只需要插入一行
<div class="container" [ngSwitch]="myVar">
<div *ngSwitchCase="'A'">Var is A</div>
// 会渲染两次
<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>
ngStyle
使用 ngStyle 指令，可以通过 Angular 表达式给特定的 DOM 元素设定 CSS 属性。
// 简单用法
<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>
对 background-color 使用了单引号，但却没有对 color 使用。这是为什么呢？
因为 ngStyle 的参数是一个 JavaScript 对象，而color是一个合法的键，不需要引号。但是在 background-color 中，连字符是不允许出现在对象的键名当中的，除非它是一个字符串， 因此使用了引号。
// 设置文字大小
//1. style.font-size.px
//2. style.font-size.em
//3. style.font-size.%
<div>
<span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
red text
</span>
</div>
ngClass
ngClass指令在HTML模板中用ngClass属性来表示,让你能动态设置和改变一个给定DOM元素的CSS类
.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>
ngFor
重复一个给定的DOM元素（或一组DOM元素） ，每次重复都会从数组中取一个不同的值。
this.cities = ['Miami', 'Sao Paulo', 'New York'];
<h4 class="ui horizontal divider header">
Simple list of strings
</h4>
<div class="ui list" *ngFor="let c of cities">
<div class="item">{{ c }}</div>
</div>
使用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">
List of objects
</h4>
<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>
渲染对象数组
// 使用嵌套数组
this.peopleByCity = [
{ city: 'Miami',
people: [
{ name: 'John', age: 12 },
{ name: 'Angel', age: 22 }
]
},
{ city: 'Sao Paulo',
people: [
{ name: 'Anderson', age: 35 },
{ name: 'Felipe', age: 36 }
]
}
]
<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>
渲染嵌套数组
获取索引
在迭代数组时，我们可能也要获取每一项的索引。我们可以在ngFor指令的值中插入语法let idx = index并用分号分隔开， 这样就可以获取索引了。
使用索引
ngNonBindable
不要编译或者绑定页面中的某个特殊部分时， 要使用ngNodBindable指令。
<div class="ui list" *ngFor="let c of cities; let num = index">
<div class="item">{{ num+1 }} - {{ c }}</div>
</div>
template: `
<div class='ngNonBindableDemo'>
<span class="bordered">{{ content }}</span>
// 第二个 span 不编译
<span class="pre" ngNonBindable>
← This is what {{ content }} rendered
</span>
</div>
`
使用ngNonBindable的结果
总结
Angular的核心指令数量很少，但我们却能通过组合这些简单的指令来创建五花八门的应用
网友评论