Angular4 中常用的指令入門總結(jié)

更新時(shí)間：2017年06月12日 10:54:06 作者：semlinker

這篇文章主要給大家總結(jié)了一些關(guān)于Angular4 中入門常用的指令，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。

前言

本文主要給大家介紹了關(guān)于Angular4 常用指令的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：

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

有時(shí)候需要根據(jù)不同的條件，渲染不同的元素，此時(shí)我們可以使用多個(gè) ngIf 來實(shí)現(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 的可選值多了一個(gè) '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 表達(dá)式，設(shè)置 DOM 元素的 CSS 屬性。

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

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

2、設(shè)置元素的字體大小

<!-- 支持單位: 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ù)是一個(gè) Javascript 對象，color 是一個(gè)有效的 key，而 background-color 不是一個(gè)有效的 key ，所以需要添加 ''。

NgClass

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

1、CSS Class

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

2、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 編譯器，無需編譯頁面中某個(gè)特定的HTML代碼片段。

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

Angular 4.x 新特性

If...Else Template Conditions

語法

<element *ngIf="[condition expression]; else [else template]"></element>

使用示例

<ng-template #hidden>
 <p>You are not allowed to see our secret</p>
</ng-template>
<p *ngIf="shown; else hidden">
 Our secret is being happy
</p>

使用示例

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

@Component({
 selector: 'exe-app',
 template: `
 <ng-template #fetching>
 <p>Fetching...</p>
 </ng-template>
 <p *ngIf="auth | async; else fetching; let user">
 {{user.username }}
 </p>
 `,
})
export class AppComponent implements OnInit {
 auth: Observable<{}>;

 ngOnInit() {
 this.auth = Observable
 .of({ username: 'semlinker', password: 'segmentfault' })
 .delay(new Date(Date.now() + 2000));
 }
}

我有話說

使用 [hidden] 屬性控制元素可見性存在的問題

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

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

直接使用 DOM API 獲取頁面上的元素存在的問題

@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 屬性，則默認(rèn)返回的是 ElementRef 對象實(shí)例。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Angular4 中常用的指令入門總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具