首頁 web前端 js教程 關於Angular4 內建指令的基本用法

關於Angular4 內建指令的基本用法

Jun 25, 2018 am 10:49 AM
angular 內建指令 指令

下面這篇文章主要給大家介紹了關於Angular4中內建指令的基本用法,文中透過範例程式碼介紹的非常詳細,需要的朋友們下面來一起看看吧。

不得不說指令是ng最強大的功能之一,好吧,也可以去掉之一,是最強大的功能。

前言

大家都知道ng內建了許多自訂的指令,這避免了我們自己去造輪子。同時,ng也提供了自訂指令的功能,可以讓我們的頁面元素標籤更實例化。

在這篇文章中,我們將分別列舉每一個內建指令的用法,並提供一個範例作為示範。盡量用最少最簡單的描述,讓你在更快更準確地學會每一種內建指令的基本用法。

ngFor

作用:像 for 迴圈一樣,可以重複的從陣列中取值並顯示出來。

範例:

// .ts

this.userInfo = ['张三', '李四', '王五'];

// .html

<p class="ui list" *ngFor="let username of userInfo">
 <p class="item">{{username}}</p>
</p>
登入後複製

解說:

他的語法是*ngFor="let username of userInfo" ,其中userInfo 是從中取值的數組,username 是每次從中取出來的值。然後在這個標籤裡面的內容就會重複執行,並透過雙向綁定,將 username 顯示出來。

ngIf

作用:根據條件決定是否顯示或隱藏這個元素。

範例:

// .html

<p *ngIf="false"></p>
<p *ngIf="a > b"></p>
<p *ngIf="username == &#39;张三&#39;"></p>
<p *ngIf="myFunction()"></p>
登入後複製

解說:

  • 永遠不會顯示

  • 當a 大於b 的時候顯示

  • 當username 等於張三的時候顯示

  • 根據myFunction() 這個函數的回傳值,決定是否顯示

ngSwitch

##作用:防止條件複雜的情況導致過多的使用ngIf。

範例:

// .html

<p class="container" [ngSwitch]="myAge">
 <p *ngSwitchCase="&#39;10&#39;">age = 10</p>
 <p *ngSwitchCase="&#39;20&#39;">age = 20</p>
 <p *ngSwitchDefault="&#39;18&#39;">age = 18</p>
</p>
登入後複製

解說:

[ngSwitch] 先與目標進行綁定,ngSwitchCase 列出每個可能性,ngSwitchDefault 列出預設值。

ngStyle

作用:可以使用動態值來設定 CSS 屬性特定的 DOM 元素。

範例:

// .ts
backColor: string = &#39;red&#39;;

// .html
<p [style.color]="yellow">
 你好,世界
</p>
<p [style.background-color]="backColor">
 你好,世界
</p>
<p [style.font-size.px]="20">
 你好,世界
</p>
<p [ngStyle]="{color: &#39;white&#39;, &#39;background-color&#39;: &#39;blue&#39;, &#39;font-size.px&#39;: &#39;20&#39;}">
 你好,世界
</p>
登入後複製

解說:

  • 直接設定顏色為yellow。

  • 設定背景顏色為 backColor,並且可以在 .ts 檔案中對 backColor 的值進行修改。

  • 設定字體大小,要注意的是 只寫 font-size 會報錯,必須在後面加上 .px。當然 .em .% 都是可以的。

  • 前三種都是只設定一個,寫 [ngStyle] 可以同時寫多個,使用花括號包住裡面的內功。需要注意的是連字符 - 是不允許出現在物件的鍵名當中的,如果使用 background-color 等時需要加上單引號。

ngClass

#作用:動態地設定和改變一個給定DOM 元素的CSS類。

範例:

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

// .ts
isBordered: boolean = true;
 
// .html
<p [ngClass]="{bordered: isBordered}">
 是否显示边框
</p>
登入後複製

解說:

  • scss 中設定了樣式,相當於你建了一個

    class="bordered"

  • ts 中新建了一個 isBordered,用來判斷是否顯示 .scss 中的樣式。

  • html 中以 isBordered 作為 bordered 是否顯示 的判斷依據。

ngNonBindable

作用:告訴 Angular 不要綁定頁面的某個部分。

範例:

.html

<p ngNonBindable>
 {{我不会被绑定}}
</p>
登入後複製

解說:

使用了ngNonBindable ,花括號就會被當作字串一起顯示出來。

總結

日常開發中,用 ngFor 和 ngIf 應該是最多的了,所以把他們兩個寫在了前面。至於 ngNonBindable,我實際開發中一次沒用過,也是查資料測試一遍寫下來的。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

在AngularJs中如何實作禁止範本快取

在angularJs中如何實作清除瀏覽器快取

#

以上是關於Angular4 內建指令的基本用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

泰拉瑞亞怎麼用指示取得物品? -泰拉瑞亞怎麼收藏物品? 泰拉瑞亞怎麼用指示取得物品? -泰拉瑞亞怎麼收藏物品? Mar 19, 2024 am 08:13 AM

泰拉瑞亞怎麼用指示取得物品?一、什麼是泰拉瑞亞給予物品指令在泰拉瑞亞遊戲中,給予物品指令是一項非常實用的功能。透過這個指令,玩家可以直接取得需要的物品,而不必費力地去打怪或傳送到某個地點。這樣可以大大節省時間,提高遊戲的效率,讓玩家更專注於探索和建立世界。總的來說,這個功能讓遊戲體驗變得更加流暢和愉快。二、如何使用泰拉瑞亞給予物品指令1.打開遊戲並進入遊戲介面。 2.按下鍵盤上的「Enter」鍵,開啟聊天視窗。 3.在聊天視窗中輸入指令的格式:「/give[玩家名稱][物品ID][物品數量]」。

如何在Ubuntu 24.04上安裝Angular 如何在Ubuntu 24.04上安裝Angular Mar 23, 2024 pm 12:20 PM

Angular.js是一種可自由存取的JavaScript平台,用於建立動態應用程式。它允許您透過擴展HTML的語法作為模板語言,以快速、清晰地表示應用程式的各個方面。 Angular.js提供了一系列工具,可協助您編寫、更新和測試程式碼。此外,它還提供了許多功能,如路由和表單管理。本指南將討論在Ubuntu24上安裝Angular的方法。首先,您需要安裝Node.js。 Node.js是一個基於ChromeV8引擎的JavaScript運行環境,可讓您在伺服器端執行JavaScript程式碼。要在Ub

angular學習之詳解狀態管理器NgRx angular學習之詳解狀態管理器NgRx May 25, 2022 am 11:01 AM

這篇文章帶大家深入了解angular的狀態管理器NgRx,介紹一下NgRx的使用方法,希望對大家有幫助!

一文探究Angular中的服務端渲染(SSR) 一文探究Angular中的服務端渲染(SSR) Dec 27, 2022 pm 07:24 PM

你知道 Angular Universal 嗎?可以幫助網站提供更好的 SEO 支援哦!

如何使用PHP和Angular進行前端開發 如何使用PHP和Angular進行前端開發 May 11, 2023 pm 04:04 PM

隨著網路的快速發展,前端開發技術也不斷改進與迭代。 PHP和Angular是兩種廣泛應用於前端開發的技術。 PHP是一種伺服器端腳本語言,可以處理表單、產生動態頁面和管理存取權限等任務。而Angular是一種JavaScript的框架,可以用來開發單一頁面應用程式和建構元件化的網頁應用程式。本篇文章將介紹如何使用PHP和Angular進行前端開發,以及如何將它們

VUE3快速入門:使用Vue.js指令實作選項卡切換 VUE3快速入門:使用Vue.js指令實作選項卡切換 Jun 15, 2023 pm 11:45 PM

本文旨在協助初學者快速入手Vue.js3,實現簡單的選項卡切換效果。 Vue.js是一個流行的JavaScript框架,可用於建立可重複使用的元件、輕鬆管理應用程式的狀態和處理使用者介面的互動操作。 Vue.js3是該框架的最新版本,相較於先前的版本變動較大,但基本原理並未改變。在本文中,我們將使用Vue.js指令實作選項卡切換效果,目的是讓讀者熟悉Vue.js的

淺析angular中怎麼使用monaco-editor 淺析angular中怎麼使用monaco-editor Oct 17, 2022 pm 08:04 PM

angular中怎麼使用monaco-editor?以下這篇文章記錄下最近的一次業務中用到的 m​​onaco-editor 在 angular 中的使用,希望對大家有幫助!

淺析Angular中的獨立組件,看看怎麼使用 淺析Angular中的獨立組件,看看怎麼使用 Jun 23, 2022 pm 03:49 PM

這篇文章帶大家了解Angular中的獨立元件,看看怎麼在Angular中建立一個獨立元件,怎麼在獨立元件中導入已有的模組,希望對大家有幫助!

See all articles