Angular 权威教程 | 第4章 内置指令

简介

内置指令是已经导入过的，你的组件可以直接使用它们。 因此，不用像你自己的组件一样把它们作为指令导入进来。

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的核心指令数量很少，但我们却能通过组合这些简单的指令来创建五花八门的应用