angular 组件与模板

简化理解官网内容
官网链接：angular 组件与模板

1. 插值表达式 {{ ... }}

Angular 对所有双花括号中的表达式求值，把求值的结果转换成字符串

<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p> 

• 不支持赋值 (=, +=, -=, ...)
• 不支持new 运算符
• 不支持使用 ; 或 , 的链式表达式
• 不支持自增和自减运算符：++ 和 --
• 不支持位运算 | 和 &
• 具有新的模板表达式运算符，比如 |、?. 和 !

2. 表达式上下文

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

表达式中的上下文变量是由模板变量、指令的上下文变量（如果有）（这是什么？？？？）和组件的成员叠加而成的。 如果你要引用的变量名存在于一个以上的命名空间中，那么被引用的顺序依次是，模板变量，指令的上下文变量，组件的成员。

模板表达式不能引用全局命名空间中的任何东西，比如 window 或 document。它们也不能调用 console.log 或 Math.max。

3. 模板语句

(event)="statement", 例如

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

模板的 $event 对象、模板输入变量(let hero)和模板引用变量(#heroForm)传给了组件中的一个事件处理器方法
(模板上下文中的变量名的优先级高于组件上下文中的变量名)

<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 运算符
• 自增和自减运算符：++ 和 --
• 操作并赋值，例如 += 和 -=
• 位操作符 | 和 &
• 模板表达式运算符，比如 |、?. 和 !

模板绑定是通过 property 和事件来工作的，而不是 attribute
HTML attribute 与 DOM property 的对比

attribute 初始化 DOM property，然后它们的任务就完成了。
property 的值可以改变；attribute 的值不能改变。
<input type="text" value="Bob"> 时，
它将创建相应 DOM 节点， 它的 value 这个 property 被初始化为 “Bob”
当用户在输入框中输入 “Sally” 时，DOM 元素的 value 这个 property 变成了 “Sally”。
该 HTML 的 value 这个 attribute 保持不变。
如果你读取 input 元素的 attribute，就会发现确实没变： 
input.getAttribute('value') // 返回 "Bob"。

disabled 这个 attribute 是另一种特例。
按钮的 disabled 这个 property 是 false，因为默认情况下按钮是可用的。 
当你添加 disabled 这个 attribute 时，
只要它出现了按钮的 disabled 这个 property 就初始化为 true，于是按钮就被禁用了。
添加或删除 disabled 这个 attribute 会禁用或启用这个按钮。
但 attribute 的值无关紧要，
这就是你为什么没法通过 <button disabled="false">仍被禁用</button> 这种写法来启用按钮。
设置按钮的 disabled 这个 property（如，通过 Angular 绑定）
可以禁用或启用这个按钮。 这就是 property 的价值。

4. 属性绑定 ([属性名])