angular 組件與模板

簡(jiǎn)化理解官網(wǎng)內(nèi)容
官網(wǎng)鏈接:angular 組件與模板

1. 插值表達(dá)式 {{ ... }}

Angular 對(duì)所有雙花括號(hào)中的表達(dá)式求值,把求值的結(jié)果轉(zhuǎn)換成字符串

<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p> 
  • 不支持賦值 (=, +=, -=, ...)
  • 不支持new 運(yùn)算符
  • 不支持使用 ; 或 , 的鏈?zhǔn)奖磉_(dá)式
  • 不支持自增和自減運(yùn)算符:++ 和 --
  • 不支持位運(yùn)算 |&
  • 具有新的模板表達(dá)式運(yùn)算符,比如 |、?.!

2. 表達(dá)式上下文

\\模板輸入變量hero和模板引用變量#heroInput
<div *ngFor="let hero of heroes">{{hero.name}}</div>
<input #heroInput> {{heroInput.value}}

表達(dá)式中的上下文變量是由模板變量、指令的上下文變量(如果有)(這是什么????)和組件的成員疊加而成的。 如果你要引用的變量名存在于一個(gè)以上的命名空間中,那么被引用的順序依次是,模板變量,指令的上下文變量,組件的成員

模板表達(dá)式不能引用全局命名空間中的任何東西,比如 window 或 document。它們也不能調(diào)用 console.log 或 Math.max。

3. 模板語(yǔ)句

(event)="statement", 例如

<button (click)="deleteHero()">Delete hero</button>

模板的 $event 對(duì)象、模板輸入變量(let hero)和模板引用變量(#heroForm)傳給了組件中的一個(gè)事件處理器方法
(模板上下文中的變量名的優(yōu)先級(jí)高于組件上下文中的變量名)

<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">
   {{hero.name}}
</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

以下不允許

  • new 運(yùn)算符
  • 自增和自減運(yùn)算符:++--
  • 操作并賦值,例如 +=-=
  • 位操作符 |&
  • 模板表達(dá)式運(yùn)算符,比如 |、?.!

模板綁定是通過(guò) property 和事件來(lái)工作的,而不是 attribute
HTML attribute 與 DOM property 的對(duì)比

attribute 初始化 DOM property,然后它們的任務(wù)就完成了。
property 的值可以改變;attribute 的值不能改變。
<input type="text" value="Bob"> 時(shí),
它將創(chuàng)建相應(yīng) DOM 節(jié)點(diǎn), 它的 value 這個(gè) property 被初始化為 “Bob”
當(dāng)用戶在輸入框中輸入 “Sally” 時(shí),DOM 元素的 value 這個(gè) property 變成了 “Sally”。
該 HTML 的 value 這個(gè) attribute 保持不變。
如果你讀取 input 元素的 attribute,就會(huì)發(fā)現(xiàn)確實(shí)沒(méi)變: 
input.getAttribute('value') // 返回 "Bob"。
disabled 這個(gè) attribute 是另一種特例。
按鈕的 disabled 這個(gè) property 是 false,因?yàn)槟J(rèn)情況下按鈕是可用的。 
當(dāng)你添加 disabled 這個(gè) attribute 時(shí),
只要它出現(xiàn)了按鈕的 disabled 這個(gè) property 就初始化為 true,于是按鈕就被禁用了。
添加或刪除 disabled 這個(gè) attribute 會(huì)禁用或啟用這個(gè)按鈕。
但 attribute 的值無(wú)關(guān)緊要,
這就是你為什么沒(méi)法通過(guò) <button disabled="false">仍被禁用</button> 這種寫(xiě)法來(lái)啟用按鈕。
設(shè)置按鈕的 disabled 這個(gè) property(如,通過(guò) Angular 綁定)
可以禁用或啟用這個(gè)按鈕。 這就是 property 的價(jià)值。

4. 屬性綁定 ([屬性名])

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第2章 基本語(yǔ)法 2.1 概述 基本句法和變量 語(yǔ)句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,540評(píng)論 0 13
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,537評(píng)論 19 139
  • 官網(wǎng) 中文版本 好的網(wǎng)站 Content-type: text/htmlBASH Section: User ...
    不排版閱讀 4,707評(píng)論 0 5
  • 今夜無(wú)眠。 新年的第三天,離表弟于六安葉集車(chē)子出事兩個(gè)多禮拜。凌晨五點(diǎn),親...
    拂柳低吟閱讀 207評(píng)論 9 28
  • 此時(shí)此刻 四個(gè)人睡在一張由兩張1.2的床拼接的2.4的酒店大床上面 因?yàn)樽蛲泶蚵閷⒔狞c(diǎn) 大家都還沒(méi)起來(lái) 去年也...
    Fallesgute閱讀 198評(píng)論 0 0

友情鏈接更多精彩內(nèi)容