Angular 学习笔记指令篇

结构型指令以 *开头,如 *ngIf, *ngFor,否则为属性型指令,如 ngClass, ngStyle等

结构指令

*ngIf

该指令用来控制元素是否加载,*ngIf的值为一个表达式,表达式的结果为布尔值.当布尔值为真时,加载该元素,反之则移除该元素.

示例

当你选择’男生’时,显示’我是男生’;当你选择’女生’时,显示’我是女生’.
值得注意的是,*ngIf是移除表达式为false的元素,并不是隐藏元素,可以通过查看元素验证这点.

    <nz-radio-group [(ngModel)]="gender">
        <label nz-radio nzValue="男生">男生</label>
        <label nz-radio nzValue="女生">女生</label>
    </nz-radio-group>
    <div *ngIf="gender=='男生'">我是男生</div>
    <div *ngIf="gender=='女生'">我是女生</div>

*ngFor

该指令用来遍历迭代器,一般用来遍历数组.在下文中,你会看到一种写法 let obj of ngForData,这是在遍历 ngForData数组,遍历到每个元素的时候,都会将这个元素命名为 obj,这样就可以读取 obj的属性了. *ngFor支持嵌套结构.
*ngFor具有以下几种模板模板变量:

• index: number:遍历时的序号, 下标从0开始
• first: boolean:若为第一个元素则返回true,否则返回false
• last: boolean:若为最后一个元素则返回true,否则返回false
• even: boolean:若为偶数元素则返回true,否则返回false
• odd: boolean:若为奇数元素则返回true,否则返回false

<table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>籍贯</th>
                <th>第一条记录</th>
                <th>最后条记录</th>
                <th>偶数记录</th>
                <th>奇数记录</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let obj of ngForData;
            let index = index;
            let first = first;
            let last = last;
            let even = even;
            let odd = odd;">
                <td>{{index}}</td>
                <td>{{obj.name}}</td>
                <td>{{obj.gender}}</td>
                <td>{{obj.hometown}}</td>
                <td [ngClass]="{'high-light-true':first,'high-light-false':!first}">{{first}}</td>
                <td [ngClass]="{'high-light-true':last,'high-light-false':!last}">{{last}}</td>
                <td [ngClass]="{'high-light-true':even,'high-light-false':!even}">{{even}}</td>
                <td [ngClass]="{'high-light-true':odd,'high-light-false':!odd}">{{odd}}</td>
            </tr>
        </tbody>
    </table>

运行结果：

属性指令

ngClass

顾名思义,给DOM元素添加 class属性,相比较普通的赋值方式, ngClass支持按条件赋值.

    <label nz-checkbox [(ngModel)]="colorBoolean">设置颜色为红色</label>
    <label nz-checkbox [(ngModel)]="sizeBoolean">设置大小为18px</label>
    <label nz-checkbox [(ngModel)]="bothBoolean">同时颜色和大小</label>
    <nz-card class="card">
        <p [ngClass]="'color size'">
            泡芙是世界上最好吃的甜点!
        </p>
        <p [ngClass]="['color', 'size']">
            泡芙是世界上最好吃的甜点!
        </p>
        <p [ngClass]="{'color': colorBoolean, 'size': sizeBoolean}">
            泡芙是世界上最好吃的甜点!
        </p>
        <p [ngClass]="stringExp">
            泡芙是世界上最好吃的甜点!
        </p>
        <p [ngClass]="{'color size' : bothBoolean}">
            泡芙是世界上最好吃的甜点!
        </p>
    </nz-card>

	colorBoolean = false;
    sizeBoolean = false;
    bothBoolean = false;
    stringExp = 'color';

通过选择复选框可以改变字体的颜色和大小

ngStyle

顾名思义,给DOM元素添加 style样式

<p [ngStyle]="{'color': 'red'}">
        很多东西,如果不是在最想要的时候得到,那之后即便是得到了,其实也没有多大意义了.
    </p>

ngSwitch

ngSwitch设定了一个参数变量, 当参数变量与 *ngSwitchCase的值一致时,显示其DOM元素,否则移除.当所有 *ngSwitchCase都无法匹配时,则显示 *ngSwitchDefault的DOM元素

    <nz-radio-group [(ngModel)]="hobby">
        <label nz-radio nzValue="sweet">我喜欢吃甜的</label>
        <label nz-radio nzValue="salty">我喜欢吃咸的</label>
        <label nz-radio nzValue="yummy">只要好吃就行</label>
    </nz-radio-group>
    <div [ngSwitch]="hobby">
        <p *ngSwitchCase="'sweet'">生活就需要甜甜的味道!</p>
        <p *ngSwitchCase="'salty'">咸一点的食物才叫美食,其他的只能叫吃的!</p>
        <p *ngSwitchDefault>只要是好吃的我都喜欢!</p>
    </div>

自定义属性型指令

<p nssStyle [nssColor]="color" [nssSize]="size" [nssWeight]="weight">
    生活就是这样的五彩斑斓!
</p>

import { Directive, ElementRef, Renderer, Input, DoCheck } from '@angular/core';
    @Directive({
        selector: '[nssStyle]'
    })
    export class NssStyleDirective implements DoCheck {
        @Input('nssColor') color: string;
        @Input('nssWeight') weight: string;
        @Input('nssSize') size: number;
        constructor(
            private elementRef: ElementRef,
            private renderer: Renderer
        ) {
        }
        ngDoCheck() {
            this.renderer.setElementStyle(this.elementRef.nativeElement, 'color', this.color);
            this.renderer.setElementStyle(this.elementRef.nativeElement, 'font-weight', this.weight);
            this.renderer.setElementStyle(this.elementRef.nativeElement, 'font-size', this.size + 'px');
        }
    }

在typescript中可以看到,我们使用了 @Directive装饰器,并且定义了选择器的名字是 [nssStyle],使用 @Input来接收参数.
@Input的格式如下

@Input('外部属性名') 内部属性名: 数据类型;