Angular4學習筆記之HTML屬性綁定

wawor4827 發布于2019-08-21 18:36 / 1560人閱讀

摘要：第二種情況控制樣式如果的值為那么樣式就是，否則就是寫在最后對于的屬性綁定和的屬性綁定是一樣一樣的。對于文章中所用的代碼是結合了學習筆記之數據綁定上面的例子做的，鏈接地址

簡介

基本HTML屬性

Css 類綁定


CSS 類綁定，[class] 全部替換的例子
 
 
CSS 類綁定，[class.sepcial] 部分替換的例子
 

CSS 類綁定，[ngClass] 替換多個的例子

Style 屬性綁定

HTML屬性綁定

Something
tableColspan 是一個表達式，當界面在渲染的時候會將 tableColspan的值綁定到 attr后面的 colspan 上面去

修改 bind.component.html



  [attr.colspan] 例子：
  
    
      跨列的例子
    
    
      單元格1
      單元格1

圖示：

Css 類綁定 第一種情況

[calss]
someExpression 的值會完全替換掉 class的值。

修改 bind.component.css

.a{background-color: #A7A9AE;}

.b{color: #488aff;}

.c{font-size: 1rem;}

修改bind.component.html



  CSS 類綁定例子1：[class]
  CSS 類綁定，[class] 全部替換的例子

修改 bind.component.ts

divClass: string;

constructor() {
   //在3秒鐘之后將樣式設置為 " a b c "
  setInterval(()=>{
    this.divClass = "a b c";
  }, 3000)
}

圖示：

第二種情況

[calss.special]
isSpecial 是一個 boolean，當 isSpecial 為 true 的時候會出現 special 的值，為 false的時候不會出現。

修改bind.component.html


CSS 類綁定，[class.sepcial] 部分替換的例子

修改 bind.component.ts

divClass: string;
isSpcial: boolean = false;

constructor() {

  setInterval(()=>{
    this.divClass = "a b c";
    
    //在 3秒鐘之后顯示樣式
    this.isSpcial = true;
  }, 3000)
}

圖示：

第三種情況

[ngClass]="{aaa:isA, bbb: isB}"
aaa 是指標簽上面class 的屬性值，isA 就boolean， 只有當 isA 為 true 的時候才會顯示 aaa 屬性。 同理，bbb 也是一樣。

修改bind.component.html


CSS 類綁定，[ngClass] 替換多個的例子

修改 bind.component.ts

divClass: string;
isSpcial: boolean = false;

isA: boolean = false;
isB: boolean = false;


constructor() {

  setInterval(()=>{
    this.divClass = "a b c";
    this.isSpcial = true;

    this.isA = true
    this.isB = true
  }, 3000)
}

圖示：

Style 屬性綁定

第一種情況

[style.color] = "isSpecial ? "red" : "green" "
控制 style樣式的 color, 如果 isSpecial 的值為true，那么color的屬性為 red。

第二種情況

[ngStyle]= "{"font-style" : this.canSave ? "italic" : "normal" }"
控制樣式 font-style 如果 this.canSave 的值為 trur 那么樣式就是 italic， 否則就是 normal

寫在最后

1.對于Style的屬性綁定和 class 的屬性綁定是一樣一樣的。
2.對于文章中所用的代碼是結合了 Angular2學習筆記之數據綁定上面的例子做的，
  鏈接地址：https://segmentfault.com/a/1190000012674948

GPU云服務器云服務器 avalon綁定屬性學習筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90637.html

Angular4學習筆記之DOM屬性綁定

摘要：如果沒有，請查看學習筆記之安裝和使用教程事件綁定準備工作了解目的在模版的界面上面增加一個按鈕，然后通過小括號綁定一個事件。簡介使用插值表達式將一個表達式的值顯示在模版上 {{productTitle}} 使用方括號將HTML標簽的一個屬性值綁定到一個表達式上使用小括號將組件控制器的一個方法綁定到模版上面的一個事件的處理器上按鈕綁定事件注意在開始下面的例子之前，請先確認已...

Genng 2019-08-21 18:34 評論0 收藏0
Angular4學習筆記——數據綁定

摘要：所以，在的世界中，唯一的作用是用來初始化元素和指令的狀態。當進行數據綁定時，只是在與元素和指令的和事件打交道，而就基本上靠邊站了，只有比較特殊的情況才會用到他。事件綁定事件名事件綁定分為對原生事件綁定和自定義事件綁定。數據綁定總體而言有三種類型： {{...}} 插值表達式綁定屬性綁定（包括property和attitude 事件綁定插值表達式綁定既可以寫在html結構中，...

MRZYD 2019-08-21 17:48 評論0 收藏0
Angular4學習筆記——組件之間的交互

摘要：具體思路子組件暴露一個屬性，當事件發生時，子組件利用該屬性向上彈射事件。父組件綁定到這個事件屬性，并在事件發生時作出回應。這個組件子樹之外的組件將無法訪問該服務或者與它們通訊。父子組件通過各自的構造函數注入該服務。通過輸入型綁定把數據從父組件傳到子組件 Angular對于父組件 => 子組件的數據通信做法和Vue很相似。 // 父組件html模板 // 子組件接收數據 i...

Guakin_Huang 2019-08-21 17:48 評論0 收藏0
Angular4學習筆記——生命周期鉤子

摘要：所以如果需要使用生命周期，只要在我們的代碼中寫上鉤子函數即可，會找到并調用像這樣的鉤子方法，有沒有接口無所謂。當使用構造函數新建一個組件或指令后，就會按下面的順序在特定時刻調用這些生命周期鉤子方法用處當設置數據綁定輸入屬性發生變化時響應。接口和鉤子在介紹生命周期的相關概念之前，可以先復習一下TypeScript對于接口的概念。在這里主要使用的是類接口及其實現： interf...

fizz 2019-08-21 17:48 評論0 收藏0
前端框架這么多，該如何抉擇？

摘要：在引起狀態變化的時刻，框架自動觸發臟檢查，也可以手動執行臟檢查，直接操作更新視圖。最后，說了這么多，大家在具體選型時還是要首先分析自己的需求和現狀，然后再做選擇。作為一個軟件開發者，最大的挑戰就是在不斷涌現的新技術中進行取舍，持續學習是從事這一行業的必備技能。在這個領域里，技術更新最快地又非前端莫屬了。各種框架的出現、版本的更新此起彼伏，呈現出一派欣欣向榮之景。在項目中必不可少的便...

Jackwoo 2019-08-29 15:37 評論0 收藏0