Angular2模板語法總結

avwu 發布于2019-08-02 13:57 / 1892人閱讀

摘要：模板語法插值表達式如模板表達式模板表達式產生一個值。如雙向數據綁定一綁定語法概覽提供了各種各樣的數據綁定，本章將逐一討論。這個目標可能是元素組件指令的元素組件指令的事件，或極少數情況下名。類綁定綁定的語法與屬性綁定類似。

1、模板語法

1、插值表達式 (?{?{...}}?) 如： {{data.title}}

2、模板表達式（[property]=“expression”）模板表達式產生一個值。 JavaScript
中那些具有或可能引發副作用的表達式是被禁止的，包括：賦值 (=,?+=,?-=, ...) new?運算符
使用?;?或?,?的鏈式表達式自增和自減運算符：++?和?--

3、模板語句（(event)="statement"）模板語句用來響應由綁定目標（如 HTML 元素、組件或指令）觸發的事件。
如：

4、雙向數據綁定 (?[(...)]

?)

一、綁定語法：概覽

Angular 提供了各種各樣的數據綁定，本章將逐一討論。先從高層視角來看看 Angular 數據綁定及其語法。
綁定的類型可以根據數據流的方向分成三類：從數據源到視圖、從視圖到數據源以及雙向的從視圖到數據源再到視圖。

二、綁定目標

數據綁定的目標是 DOM 中的某些東西。這個目標可能是（元素 | 組件 | 指令的）property、（元素 | 組件 | 指令的）事件，或(極少數情況下) attribute 名。下面是的匯總表：

三、attribute、class 和 style 綁定

attribute 綁定

attribute和property都可以翻譯成屬性。但是前面所說的屬性綁定是Property binding，而這里說的是ttribute綁定。

Property——屬性
attribute——特性

簡單的理解:
Attribute就是DOM節點自帶的屬性，例如html中常用的id、class 、title、align.
Property是這個DOM元素作為對象，其附加的內容, 例如childNodes、firstChild.

注意：
常用的Attribute，例如id、class 、title等，已經被作為Property附加到DOM對象上，可以和Property一樣取值和賦值。但是自定義的Attribute，就不會有這樣的特殊優待。

因此，當元素沒有屬性可綁的時候，就必須使用 attribute 綁定。
考慮 ARIA， SVG 和 table 中的 colspan / rowspan 等 attribute。它們是純粹的 attribute，沒有對應的屬性可供綁定。
如果想寫出類似下面這樣的東西，現狀會令我們痛苦：

Three-Four

會得到這個錯誤：

  Template parse errors:
  Can"t bind to "colspan" since it isn"t a known native property
 （模板解析錯誤：不能綁定到 "colspan"，因為它不是已知的原生屬性）

正如提示中所說，元素沒有colspan屬性。它只有colspan特性，但是插值表達式和屬性綁定只能設置屬性，并不能設置特性attribute。

CSS 綁定

借助 CSS 類綁定，可以從元素的 class attribute 上添加和移除 CSS 類名。

CSS 類綁定綁定的語法與屬性綁定類似。但方括號中的部分不是元素的屬性名，而是由class前綴，一個點 (.)和 CSS 類的名字組成，其中后兩部分是可選的。形如：[class.class-name]。
1、[style.propertyName]，如：

CSS 綁定方式1

2、[ngStyle]
所以上面的例子，我們就可以直接使用[ngStyle]來動態綁定button的font-size和margin。如：

  CSS 綁定方式2
  private PStyle: any = {
     margin: "10px",
     fontSize: "2em"
 };

3[class.className]使用這種方式，我們可以根據綁定變量的值來動態添加或者移除css class。

CLASS 綁定

class綁定跟css綁定類似，
1、[class.className]

2、[ngClass]

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

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

Angular2模板語法總結

摘要：模板語法插值表達式如模板表達式模板表達式產生一個值。如雙向數據綁定一綁定語法概覽提供了各種各樣的數據綁定，本章將逐一討論。這個目標可能是元素組件指令的元素組件指令的事件，或極少數情況下名。類綁定綁定的語法與屬性綁定類似。 1、模板語法 1、插值表達式 (?{?{...}}?) 如： {{data.title}} 2、模板表達式（[property]=expression）模板表達式...

RiverLi 2019-08-30 15:55 評論0 收藏0
Angular2模板語法總結

摘要：模板語法插值表達式如模板表達式模板表達式產生一個值。如雙向數據綁定一綁定語法概覽提供了各種各樣的數據綁定，本章將逐一討論。這個目標可能是元素組件指令的元素組件指令的事件，或極少數情況下名。類綁定綁定的語法與屬性綁定類似。 1、模板語法 1、插值表達式 (?{?{...}}?) 如： {{data.title}} 2、模板表達式（[property]=expression）模板表達式...

bigdevil_s 2019-08-26 13:26 評論0 收藏0
Angular 2 快速上手

摘要：為了簡單起見，在本文中將會使用。已經實例化了并且將它的模板載入到了元素中。中的依賴注入發生在該類的構造函數中，因此我們將在構造函數中注入。國內 Angular2 資料比較少，這里看到一篇不錯的入門文章就分享過來了 —— Angular 2 快速上手，這里面還有很多有關于 Angular2 的文章，感興趣的朋友可以去看一看目前angular2已經來到了beta版，這意味著它已經做好了...

singerye 2019-08-19 17:38 評論0 收藏0
Angular2 VS Angular4 深度對比：特性、性能

摘要：的特性和性能是的超集，用于幫助的開發。注解提供了連接元數據和功能的工具。通過在庫中提供基本信息可以調用函數或創建類的實例來檢查相關元數據，從而簡化了對象實例的構建。停用它會響應跳出舊控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web應用開發領域，Angular被認為是最好的開源JavaScri...

孫淑建 2019-08-20 18:37 評論0 收藏0
AngularJS 2 Quick Start

摘要：引言是用于構建基于瀏覽器的復雜應用的下一代框架。它涵蓋了的一些基本概念，包括組件模型服務管道傳入傳出以及事件播散等使用方法，并介紹了項目的基本組織結構等。用于雙向綁定，使用來定義，專門用于定義雙向綁定。引言 Angular2 是 Google 用于構建基于瀏覽器的復雜應用的下一代 MV* 框架。該項目是我學習 Angular2 的入門項目，我覺得它很友好地表達了 Angular2 的...

Channe 2019-08-19 17:43 評論0 收藏0