簡(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à)值。