Angular 2 屬性指令 vs 結(jié)構(gòu)指令

Angular 2 的指令有以下三種：

• 組件(Component directive)：用于構(gòu)建UI組件，繼承于 Directive 類

• 屬性指令(Attribute directive):  用于改變組件的外觀或行為

• 結(jié)構(gòu)指令(Structural directive):  用于動(dòng)態(tài)添加或刪除DOM元素來(lái)改變DOM布局

組件

import { Component } from '@angular/core';

@Component({  
    selector: 'my-app', // 定義組件在HTML代碼中匹配的標(biāo)簽  
    template: `<h2>Hello `name`</h2>`,  // 指定組件關(guān)聯(lián)的內(nèi)聯(lián)模板
})
export class AppComponent  {  name = 'Angular'; }

Angular 2 內(nèi)置屬性指令

1.ngStyle指令： 用于設(shè)定給定 DOM 元素的 style 屬性

使用常量

<div [ngStyle]="{'background-color': 'green'}"></div>

使用變量

<div [ngStyle]="{'background-color': person.country === 'UK' ? 'green' : 'red'}">

具體示例：

import { Component } from '@angular/core';

@Component({
    selector: 'ngstyle-example',
    template: `
        <h5>NgStyle</h5>
        <ul *ngFor="let person of people">
            <li [ngStyle]="{'color': getColor(person.country)}"> 
                {{ person.name }} (`person`.`country`)
            </li>
        </ul>
`})
export class NgStyleExampleComponent {    
    getColor(country: string) { 
        switch (country) { 
        case 'CN': 
            return 'red';
        case 'USA': 
            return 'blue';
        case 'UK': 
            return 'green';
       }    
    }    
    
    people: any[] = [
        { name: "Semlinker", country: 'CN' },
        { name: "Donald John Trump", country: 'USA' },
        { name: "Daniel Manson", country: 'UK' }    
     ];
}

上面的例子，除了使用 ngStyle 指令，我們還可以使用 [style.<property>] 的語(yǔ)法：

 <ul *ngFor="let person of people">     
     <li [style.color]="getColor(person.country)">
         {{ person.name }} (`person`.`country`)
     </li>
</ul>

2.ngClass指令：用于動(dòng)態(tài)的設(shè)定 DOM 元素的 CSS class

使用常量

<div [ngClass]="{'text-success': true }"></div>

使用變量

<div [ngClass]="{'text-success': person.country === 'CN'}"></div>

具體示例：

import { Component } from '@angular/core';

@Component({
    selector: 'ngclass-example',
    template: `
        <style>
            .text-success { color: green } 
            .text-primary { color: red }      
            .text-secondary { color: blue }
        </style>
        <h5>NgClass</h5>
        <ul *ngFor="let person of people">
            <li [ngClass]="{ 'text-success': person.country === 'UK', 
                'text-primary': person.country === 'CN',
                'text-secondary': person.country === 'USA'}">
                {{ person.name }} (`person`.`country`)
            </li>
        </ul>`,
})
export class NgClassExampleComponent {    

    people: any[] = [
        { name: "Semlinker", country: 'CN' },
        { name: "Donald John Trump", country: 'USA' },
        { name: "Daniel Manson", country: 'UK' }    
    ];
}

Angular 2 內(nèi)置結(jié)構(gòu)指令

1.ngIf指令：根據(jù)表達(dá)式的值，顯示或移除元素

<div *ngIf="person.country === 'CN'">
    {{ person.name }} (`person`.`country`)
</div>

2.ngFor指令：使用可迭代的每個(gè)項(xiàng)作為模板的上下文來(lái)重復(fù)模板，類似于 Ng 1.x 中的 ng-repeat 指令

<div *ngFor="let person of people">`person`.`name`</div>

3.ngSwitch指令：它包括兩個(gè)指令，一個(gè)屬性指令和一個(gè)結(jié)構(gòu)指令。它類似于 JavaScript 中的 switch 語(yǔ)句

<ul [ngSwitch]='person.country'>  
    <li *ngSwitchCase="'UK'" class='text-success'>
        {{ person.name }} (`person`.`country`)  
    </li>  
    <li *ngSwitchCase="'USA'" class='text-secondary'>
        {{ person.name }} (`person`.`country`)
    </li> 
    <li *ngSwitchDefault class='text-primary'>
        {{ person.name }} (`person`.`country`)
    </li>
</ul>

通過(guò)上面的例子，可以看出結(jié)構(gòu)指令和屬性指令的區(qū)別。結(jié)構(gòu)指令是以 * 作為前綴，這個(gè)星號(hào)其實(shí)是一個(gè)語(yǔ)法糖。它是 ngIf 和 ngFor 語(yǔ)法的一種簡(jiǎn)寫形式。Angular 引擎在解析時(shí)會(huì)自動(dòng)轉(zhuǎn)換成 <template> 標(biāo)準(zhǔn)語(yǔ)法。

Angular 2 內(nèi)置結(jié)構(gòu)指令標(biāo)準(zhǔn)形式

1.ngIf指令：

<template [ngIf]='condition'>  
 <p>I am the content to show</p>
</template>

2.ngFor指令：

<template ngFor [ngForOf]="people" let-person>   
    <div> {{ person.name }} (`person`.`country`) </div>
</template>

3.ngSwitch指令：

<ul [ngSwitch]='person.country'>  
    <template [ngSwitchCase]="'UK'">
      <li class='text-success'> 
         {{ person.name }} (`person`.`country`)
      </li>
    </template>
    <template [ngSwitchCase]="'USA'">
       <li class='text-secondary'> 
         {{ person.name }} (`person`.`country`)
       </li>  
    </template>  
    <template [ngSwitchDefault]> 
        <li class='text-primary'>
         {{ person.name }} (`person`.`country`)
        </li>
    </template>
</ul>

Angular 2 內(nèi)置結(jié)構(gòu)指令定義

1.ngIf指令定義：

@Directive({selector: '[ngIf]'})
export class NgIf {}

2.ngFor指令定義：

@Directive({selector: '[ngFor][ngForOf]'})
export class NgForOf<T> implements DoCheck, OnChanges {}

3.ngSwitch指令定義：

@Directive({selector: '[ngSwitch]'})
export class NgSwitch {}

@Directive({selector: '[ngSwitchCase]'})
export class NgSwitchCase implements DoCheck {}

@Directive({selector: '[ngSwitchDefault]'})
export class NgSwitchDefault {}

自定義屬性指令

指令功能描述：該指令用于在用戶點(diǎn)擊宿主元素時(shí)，根據(jù)輸入的背景顏色，更新宿主元素的背景顏色。宿主元素的默認(rèn)顏色是×××。

1. 指令實(shí)現(xiàn)

import {Directive, Input, ElementRef, HostListener} from "@angular/core";

@Directive({  selector: '[exeBackground]'})
export class BeautifulBackgroundDirective {  

    private _defaultColor = 'yellow';  
    private el: HTMLElement;  
    
    @Input('exeBackground')  backgroundColor: string;  
    constructor(el: ElementRef) {    
        this.el = el.nativeElement;    
        this.setStyle(this._defaultColor);  
    }  @HostListener('click')  
    
    onClick() { 
        this.setStyle(this.backgroundColor || this._defaultColor);  
    }  
    
    private setStyle(color: string) { 
        this.el.style.backgroundColor = color;  
    }
}

2.指令應(yīng)用：

import { Component } from '@angular/core';

@Component({  
    selector: 'my-app',
    template: `<h2 [exeBackground]="'red'">Hello `name`</h2>`,
})
export class AppComponent  {  
    name = 'Angular'; 
}

自定義結(jié)構(gòu)指令

指令功能描述：該指令實(shí)現(xiàn) ngIf 指令相反的效果，當(dāng)指令的輸入條件為 Falsy 值時(shí)，顯示DOM元素。

1.指令實(shí)現(xiàn)

@Directive({  selector: '[exeUnless]'})
export class UnlessDirective {  
    @Input('exeUnless')  
    set condition(newCondition: boolean) {    
        if (!newCondition) { 
            this.viewContainer.createEmbeddedView(this.templateRef);
        } else {     
            this.viewContainer.clear();    
        }  
    }  
    
    constructor(private templateRef: TemplateRef<any>,     
        private viewContainer: ViewContainerRef) {  }
}

2.指令應(yīng)用

import { Component } from '@angular/core';

@Component({ 
    selector: 'my-app',  
    template: `<h2 [exeBackground]="'red'" 
        *exeUnless="condition">Hello `name`</h2>`, 
})
export class AppComponent  {  
    name = 'Angular';   
    condition: boolean = false;
}

總結(jié)

本文主要介紹了 Angular 2 中的屬性指令和結(jié)構(gòu)指令，通過(guò)具體示例介紹了 Angular 2 常見(jiàn)內(nèi)建指令的使用方式和區(qū)別。最終，我們通過(guò)自定義屬性指令和自定義結(jié)構(gòu)指令兩個(gè)示例，展示了如何開(kāi)發(fā)自定義指令。