Angular2笔记3-内置指令

Posted on   |   In   |  

几个内置指令的用法, 不全 回头再补

ngIf

如果表达式结果是false的话，该元素将不会渲染DOM。

1
<div *ngIf="false">

ngSwtichWhen ngSwitchDefault

相当于switch语句, 不限于只匹配一个。例如,在上面的示例中choice是2时,第二和第五li将渲染。

1
2
3
4
5
6
7
8
9
10
<div class="ui raised segment">
    <ul [ngSwitch]="choice">
        <li *ngSwitchWhen="1">First choice</li>
        <li *ngSwitchWhen="2">Second choice</li>
        <li *ngSwitchWhen="3">Third choice</li>
        <li *ngSwitchWhen="4">Fourth choice</li>
        <li *ngSwitchWhen="2">Second choice, again</li> 
        <li *ngSwitchDefault>Default choice</li>
    </ul> 
</div>

ngStyle

为DOM元素设置一个CSS属性

1
2
3
4
<div [ngStyle]="{color: 'white', 'background-color': 'blue'}"></div>
<input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
<span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">red text</span>

ngClass

给DOM元素动态地设置和改变CSS类

1
2
<div [ngClass]="{bordered: false}"></div>
<div [ngClass]="['blue', 'round']"> </div>

ngFor

语法是

1
*ngFor="#item of items"

1
2
3
4
5
6
7
8
9
10
this.people = [
    { name: 'Anderson', age: 35, city: 'Sao Paulo' },
    { name: 'John', age: 12, city: 'Miami' },
    { name: 'Peter', age: 22, city: 'New York' }
];
<tr *ngFor="#p of people; #num = index">
    <td>{{ num+1 }} -- {{ p.name }}</td> 
    <td>{{ num+1 }} -- {{ p.age }}</td> 
    <td>{{ num+1 }} -- {{ p.city }}</td>
</tr>

NgNonBindable

告诉angular不编译或绑定我们的页面的特定部分

1
<span class="pre" ngNonBindable><- This is what {{ content }} rendered </span>