Angular2模板語法與常用指令簡介-創(chuàng)新互聯(lián)

一、模板語法簡介

插值表達式

平武ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

<div>Hello `name`</div>

等價于

<div [textContent]="interpolate(['Hello'], [name])"></div>

模板表達式

1.屬性綁定

1.1輸入屬性的值為常量

<show-title title="Some Title"></show-title>

等價于

<show-title [title]="'Some Title'"></show-title>

1.2輸入屬性的值為實例屬性

<show-title [title]="title"></show-title>

等價于

<show-title bind-title="title"></show-title>

2.事件綁定

<date-picker (dateChanged)="statement()"></date-picker>

等價于

<date-picker on-dateChanged="statement()"></date-picker>

模板引用變量

<video-player #player></video-player> 
<button (click)="player.pause()">Pause</button>

等價于

<video-player ref-player></video-player>

雙向綁定

<input [ngModel]="todo.text" (ngModelChange)="todo.text=$event">

等價于

<input [(ngModel)]="todo.text">

*與<template>

1.*ngIf

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

最終轉(zhuǎn)換為

<template [ngIf]="currentHero">  
    <hero-detail [hero]="currentHero"></hero-detail>
</template>

2.*ngFor

<hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes" 
    [hero]="hero">
</hero-detail>

最終轉(zhuǎn)換為

<template ngFor let-hero [ngForOf]="heroes" 
    [ngForTrackBy]="trackByHeroes">  
        <hero-detail [hero]="hero"></hero-detail>
</template>

常用指令簡介

NgIf

<div *ngIf="false"></div> <!-- never displayed -->
<div *ngIf="a > b"></div> <!-- displayed if a is more than b -->
<div *ngIf="str == 'yes'"></div> <!-- displayed if str holds the string "yes" -->
<div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->

NgSwitch

有時候需要根據(jù)不同的條件，渲染不同的元素，此時我們可以使用多個ngIf來實現(xiàn)。

<div class="container">    
    <div *ngIf="myVar == 'A'">Var is A</div> 
    <div *ngIf="myVar == 'B'">Var is B</div> 
    <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div>
</div>

如果myVar的可選值多了一個'C'，就得相應(yīng)增加判斷邏輯：

<div class="container"> 
    <div *ngIf="myVar == 'A'">Var is A</div>
    <div *ngIf="myVar == 'B'">Var is B</div>
    <div *ngIf="myVar == 'C'">Var is C</div>
    <div *ngIf="myVar != 'A' && myVar != 'B' && myVar != 'C'">
        Var is something else    
    </div>
</div>

可以發(fā)現(xiàn)Var is something else的判斷邏輯，會隨著myVar 可選值的新增，變得越來越復(fù)雜。遇到這種情景，我們可以使用ngSwitch指令。

<div class="container" [ngSwitch]="myVar">    
    <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 表達式，設(shè)置 DOM 元素的 CSS 屬性。

設(shè)置元素的背景顏色

<div [style.background-color="'yellow'"]>  Use fixed yellow background</div>

<!-- 支持單位: px | em | %-->
<div>   
    <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
        red text
    </span>
</div>

NgStyle 支持通過鍵值對的形式設(shè)置 DOM 元素的樣式：

<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">  
     Uses fixed white text on blue background
</div>

注意到background-color需要使用單引號，而color不需要。這其中的原因是，ng-style要求的參數(shù)是一個Javascript對象，color是一個有效的key，而background-color不是一個有效的key，所以需要添加''。

NgStyle 源碼片段

@Directive({selector: '[ngStyle]'})
export class NgStyle implements DoCheck {  
    private _ngStyle: {[key: string]: string};  
    
    private _differ: KeyValueDiffer<string, string|number>;  
    
    constructor(    private _differs: KeyValueDiffers,     
        private _ngEl: ElementRef, private _renderer: Renderer) {}  
        
    @Input()  set ngStyle(v: {[key: string]: string}) {     
        // <div [ngStyle]="{color: 'white', 'background-color': 'blue'}">    
        this._ngStyle = v;    if (!this._differ && v) {     
          this._differ = this._differs.find(v).create();   
           } 
         }   
         
         // 設(shè)置元素的樣式  private _setStyle(nameAndUnit: string, 
         value: string|number): void {    
         const [name, unit] = nameAndUnit.split('.'); 
         // 截取樣式名和單位    
         value = value != null && unit ? `${value}${unit}` : value;  
         this._renderer.setElementStyle(this._ngEl.nativeElement, name, 
             value as string); 
     }
}

NgClass

NgClass 接收一個對象字面量，對象的key是 CSS class 的名稱，value的值是truthy/falsy的值，表示是否應(yīng)用該樣式。

CSS Class

.bordered {    border: 1px dashed black; background-color: #eee;}

HTML

<!-- Use boolean value -->
<div [ngClass]="{bordered: false}">
    This is never bordered
</div>

<div [ngClass]="{bordered: true}">
    This is always bordered
</div>

<!-- Use component instance property -->
<div [ngClass]="{bordered: isBordered}"> 
    Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div>

<!-- Class names contains dashes -->
<div[ngClass]="{'bordered-box': false}">
    Class names contains dashes must use single quote
</div>

<!-- Use a list of class names -->
<div class="base" [ngClass]="['blue', 'round']">
    This will always have a blue background and round corners
</div>

NgFor

NgFor 指令用來根據(jù)集合(數(shù)組) ，創(chuàng)建DOM元素，類似于ng1中ng-repeat指令

<div class="ui list" *ngFor="let c of cities; let num = index"> 
  <div class="item">{{ num+1 }} - {{ c }}</div>
</div>

使用trackBy提高列表的性能

@Component({  
    selector: 'my-app', 
    template: `
    <ul>
      <li *ngFor="let item of collection;trackBy: trackByFn">
       `item`.`id`
      </li>   
    </ul>    
    <button (click)="getItems()">Refresh items</button> 
`,})
export class App {  
    constructor() {    
        this.collection = [
            {id: 1}, 
            {id: 2}, 
            {id: 3}
         ];  
    } 
    
    getItems() {    
        this.collection = this.getItemsFromServer(); 
    }    
    
    getItemsFromServer() { 
        return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];  
    }    
    
    trackByFn(index, item) {    
        return index; // or item.id  
    }
}

NgNonBindable

ngNonBindable 指令用于告訴 Angular 編譯器，無需編譯頁面中某個特定的HTML代碼片段。

<div class='ngNonBindableDemo'> 
    <span class="bordered">{{ content }}</span>
    <span class="pre" ngNonBindable>
        &larr; This is what {{ content }} rendered    
    </span>
</div>

注意事項

1.使用[hidden]屬性控制元素的可見性

<div [hidden]="!showGreeting">  Hello, there!</div>

上面的代碼在通常情況下，都能正常工作。但當在對應(yīng)的 DOM 元素上設(shè)置display: flex屬性時，盡管[hidden]對應(yīng)的表達式為true，但元素卻能正常顯示。對于這種特殊情況，則推薦使用*ngIf。

2.直接使用DOMAPI 獲取頁面上的元素

@Component({  
    selector: 'my-comp',
    template: `
        <input type="text" /> 
        <div> Some other content </div> 
`})
export class MyComp {  
    constructor(el: ElementRef) {    
        el.nativeElement.querySelector('input').focus(); 
    }
}

以上的代碼直接通過querySelector()獲取頁面中的元素，通常不推薦使用這種方式。更好的方案是使用@ViewChild和模板變量，具體示例如下：

@Component({  
    selector: 'my-comp', 
    template: `
        <input #myInput type="text" />
        <div> Some other content </div>  
`})
export class MyComp implements AfterViewInit {  
    @ViewChild('myInput') input: ElementRef; 
    
     constructor(private renderer: Renderer) {}  
     
     ngAfterViewInit() {    
         this.renderer.invokeElementMethod( 
           this.input.nativeElement, 'focus');    
     }
}

另外值得注意的是，@ViewChild()屬性裝飾器，還支持設(shè)置返回對象的類型，具體使用方式如下：

@ViewChild('myInput') 
myInput1: ElementRef;

@ViewChild('myInput', {read: ViewContainerRef})
myInput2: ViewContainerRef;

若未設(shè)置read屬性，則默認返回的是ElementRef對象實例。

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證，機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準確進行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

分享標題：Angular2模板語法與常用指令簡介-創(chuàng)新互聯(lián)
標題鏈接：http://m.newbst.com/article14/dopdde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、搜索引擎優(yōu)化、小程序開發(fā)、手機網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Angular2模板語法與常用指令簡介-創(chuàng)新互聯(lián)

一、模板語法簡介

常用指令簡介