關於Angular4 內建指令的基本用法
下面這篇文章主要給大家介紹了關於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 == '张三'"></p> <p *ngIf="myFunction()"></p>
解說:
永遠不會顯示
當a 大於b 的時候顯示
當username 等於張三的時候顯示
根據myFunction() 這個函數的回傳值,決定是否顯示
ngSwitch
##作用:防止條件複雜的情況導致過多的使用ngIf。
範例:
// .html <p class="container" [ngSwitch]="myAge"> <p *ngSwitchCase="'10'">age = 10</p> <p *ngSwitchCase="'20'">age = 20</p> <p *ngSwitchDefault="'18'">age = 18</p> </p>
解說:
ngStyle
作用:可以使用動態值來設定 CSS 屬性特定的 DOM 元素。
範例:
// .ts backColor: string = 'red'; // .html <p [style.color]="yellow"> 你好,世界 </p> <p [style.background-color]="backColor"> 你好,世界 </p> <p [style.font-size.px]="20"> 你好,世界 </p> <p [ngStyle]="{color: 'white', 'background-color': 'blue', 'font-size.px': '20'}"> 你好,世界 </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>
解說:
總結
日常開發中,用 ngFor 和 ngIf 應該是最多的了,所以把他們兩個寫在了前面。至於 ngNonBindable,我實際開發中一次沒用過,也是查資料測試一遍寫下來的。 以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦:#
以上是關於Angular4 內建指令的基本用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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