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>

至今未见到别的用法，如有请留言补充。