螢石推出智慧門鈴 CP3、EP3：體積小巧、具備 2K 解析度、2~3 個月續航
阿新 • • 發佈：2022-03-18
- 指令是為Angular應用程式中的元素新增額外行為的類，使用Angular的內建指令，你可以管理表單、列表、樣式已經要讓使用者看到的任何內容。
- 指令的型別如下：
- 元件：帶有模板的指令，此類指令是最常見的指令型別。
- 屬性型指令：可以更改元素、元件或者其他指令的外觀或者行為的指令。
- 結構性指令：通過新增和刪除DOM元素來更改DOM佈局的指令。
- 內建屬性型指令
- Angular內建了一些屬性型指令用來監聽並修改其他HTML元素和元件的行為、屬性。
- 最常見的屬性型指令如下：
- NgClass：新增和刪除一組CSS類。
- NgStyle：新增額刪除一組Html樣式。
- NgModel：將資料雙向繫結到Html表單元素上。
- 將NgClass與表示式一起使用，適合根據變數來應用到不同的CSS類，如下
檢視程式碼
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ly-internal-directive', templateUrl: './ly-internal-directive.component.html', styleUrls: ['./ly-internal-directive.component.css'] }) export class LyInternalDirectiveComponent implements OnInit { constructor() { } // 定義一個變數，用於在模板檔案中控制是否應用某個CSS類 isSpecial = false; ngOnInit(): void { } }檢視程式碼
<p>ly-internal-directive works!</p> //special在css檔案中定義的，如果isSpecial為true，則不應用任何CSS類，否則將應用special的CSS類 <div [ngClass]="isSpecial?'':'special'">special:應用樣式的時候顏色將變紅哦，否則就是黑色的</div>檢視程式碼
// 定義special的css類，用於體現效果 .special { font-family: 'Times New Roman', Times, serif; font-size:20px; color: red; }
- 將NgClass與方法一起使用，其實還是呼叫k-v物件來存放一組可控制的css
檢視程式碼
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ly-internal-directive', templateUrl: './ly-internal-directive.component.html', styleUrls: ['./ly-internal-directive.component.css'], }) export class LyInternalDirectiveComponent implements OnInit { constructor() {} canSave = true; isSpecial = true; isUnchanged = true; // ts中類似於map或者dictionary的存在，模板頁面將繫結此變數，用於控制多個CSS的顯示或者隱藏 currentClasses: Record<string, boolean> = {}; ngOnInit(): void { this.setCurrentClasses(); } setCurrentClasses() { // 其中 saveable、modified都是在css類中定義的類，this.canSave和this.isUnchanged是用於控制這些calss是否被應用 // angular會將下面的key作為class名稱，賦值給dom的class this.currentClasses = { saveable: !this.canSave, modified: this.isUnchanged, }; } }檢視程式碼
<!-- ngClass 綁定了ts檔案中的一個k-v的物件，用於add/remove class--> <div [ngClass]="currentClasses">將NgClass與方法一起使用</div>檢視程式碼
.saveable { color: limegreen; } .modified { font-family: "Brush Script MT", cursive; font-size: 2rem; }
- 用NgStyle設定內聯樣式，使用邏輯操作符判斷樣式的設定，使用Record物件來設定一組Style
檢視程式碼
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ly-internal-directive', templateUrl: './ly-internal-directive.component.html', styleUrls: ['./ly-internal-directive.component.css'], }) export class LyInternalDirectiveComponent implements OnInit { constructor() {} canSave = true; isSpecial = true; isUnchanged = false; // ts中類似於map或者dictionary的存在 currentStyles: Record<string, string> = {}; ngOnInit(): void { this.setCurrentStyles(); } setCurrentStyles() { this.currentStyles = { 'font-style': this.canSave ? 'italic' : 'normal', 'font-weight': !this.isUnchanged ? 'bold' : 'normal', 'font-size': this.isSpecial ? '24px' : '12px', }; } }檢視程式碼
<p>------------Ng Style Demo----------------</p> <!--ngStyle綁定了一組style的Record物件，用於將多個樣式繫結到此Div上--> <div [ngStyle]="currentStyles"> This div is initially italic,normal weight,and extra large(24px). </div>
- 用NgMode進行雙向繫結
- 內建結構性指令
- 自定義屬性型指令
- 自定義結構性指令