Angular在HTML中三種括號的使用

Angular作爲前端三大主流框架（截止2020年3月），有很多自己的個性。

在HTML頁面中，Angular也實行數據綁定，形式是三種括號的使用：（）、[]和{{}}，下面分述：

1. 小括號（）

小括號用於事件綁定：觸發DOM元素上的事件，綁定的方法就會響應。比如：

<button nz-button [nzType]="'primary'" (click)="showModal()" class="btn-add" [disabled]="!isOperation">
    <i class="fas fa-plus"></i>
    新增
</button>

定義事件，我們這裏習慣是放在service.ts文件中。

 

2. 中括號[]

屬性名加上方括號後，右側賦值爲表達式的值。例如：

<app-testnode [elements]="graphData" [layout]="layout"></app-testnode>

elements和layout一定是在component中有定義的。

 

3. 大括號{}，實際使用的是{{}}

使用大括號 {{表達式}} 這種方法稱之爲插值。可以混在html的DOM元素中。大括號{{}}裏面的表達式不能用於賦值、運算等操作，一般用於顯示錶達式的值。

<div class="col-em-offset-5">
    <p class="form-control-static">{{node.assetNumber}}</p>
</div>

至今未見到別的用法，如有請留言補充。