Angular语法

插值表达式{{}}

模板表达式：具有新的模板表达式运算符，比如 |、?. 和 !。如[property]="expression"。

表达式的上下文可以包括组件之外的对象。 比如模板输入变量 (let hero)和模板引用变量(#heroInput)就是备选的上下文对象之一。

表达式中的上下文变量是由模板变量、指令的上下文变量（如果有）和组件的成员叠加而成的

模板变量是最优先的，其次是指令的上下文变量，最后是组件的成员

 

绑定的类型可以根据数据流的方向分成三类： 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

1.单向从数据源到视图

{{expression}}
[target]="expression"
bind-target="expression"

 绑定类型：插值表达式、属性、Attribute、CSS 类样式

2.从视图到数据源的单向绑定（事件）

(target)="statement"
on-target="statement"

双向

[(target)]="expression"
bindon-target="expression"

HTML attribute 和 DOM property

提到“属性”的地方，一定是指 property

<!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Save</button>

attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。

这里不是设置 attribute，而是设置 DOM 元素、组件和指令的 property。

• 少量 HTML attribute 和 property 之间有着 1:1 的映射，如 id。

• 有些 HTML attribute 没有对应的 property，如 colspan。

• 有些 DOM property 没有对应的 attribute，如 textContent。

• 大量 HTML attribute 看起来映射到了 property…… 但却不像你想的那样！

绑定目标

属性：[]

事件：()

双向：[()]

Attribute：attribute

<button [attr.aria-label]="help">help</button>

CSS 类：class property

<div [class.special]="isSpecial">Special</div>

样式：style property

<button [style.color]="isSpecial ? 'red' : 'green'">

属性绑定