[Ang]繫結binding：內嵌、屬性、事件

內嵌 {{ }}
在 app.component.ts檔案中設定的值，
可以直接在 app.component.html (template)調用，
可讓在標籤之間，也可放在屬性中，
也可以寫入回呼建構式。

屬性 []
這裡的屬性是指 DOM的 property，非 Html的 attribute，
要查詢 property可在開發者工具裡的找到

打開第二項的HTMLImageElement，
可以看到有 alt, attribute, title ...
eg: href="{{ url }}"
改寫成 [href]="url"。
[ ]綁定只限property，例如<a [myData]= "..."></a>會產生語法錯誤，
因為myData並不是property。
在ng中自訂字如要綁定，則使用：
[attr.自訂字]= " ..."
在[ ]自訂自前方加入attr.即可。

事件 ()
事實上，ng裡面並沒有function，
只有類別，類別裡面只有屬性跟方法。
在標籤中將原本 onclick=""改為 on-click=""就變成ng的語法，
然後放入方法，例如：
<img on-click="change()"></img>
其中change()，來自component。
而比較建議的做法是
把 on移除，加上 ()改為 (click)=""，可讀性也高。
在事件 binding使用上，" "中按下
win ctrl+space
mac
會跳出建議選項，再自行加入()，方便使用。

事件參數 ($event)
可以做到控制有無按下option(alt)+click，發生事件。
但要注意大小寫，例如 $event.altKey ；
我們在 component中加入 console.log($event);
進入開發工具來觀察，型別是MouseEvent。
展開可以看到有非常多 property能使用，
為避免寫錯大小寫，我們可以在參數後方加入型別，例如
functionName($event: MouseEvent) { ... }
這樣在 $event後輸入 ' . ' 就可以用選的，用tab鍵自動輸入，降低打錯字的機率。