angualr：属性绑定[]、事件绑定()、插值{}

1 背景

刚开始学习angular时，方括号和圆括号一脸懵逼，写了一篇https://blog.csdn.net/jeason_chan_zju/article/details/100089216，现在使用了一段时间后，对一些概念有了更好的理解方式。对angular中的方括号、圆括号、花括再次进行总结。

2方括号[]

angular完全重写了html中所有的基础组件，虽然组件的属性名相同，但是，属性的使用方式分为分为动态绑定和静态绑定两种。动态绑定就是，属性名使用方括号进行包裹，取等号右边的表达式的值作为属性的赋值，因此，只要属性使用方括号，双引号中均看作表达式。静态绑定就是，直接使用属性名，就想原始html一样，但是，angular使用的是自完全重构的组件，并不是像自己之前写的那样，不用方括号就使用html的绑定，其实是，不使用方括号，双引号中的东西就一般看做字符串。
代码实践：

//ts文件，组件
red: string = "blue";

    <div class="red">red</div>    //这里类名为red
    <div [class]="red">red</div>  //这里类名为blue,就是说有方括号右侧为表达式

3圆括号()

圆括号用于事件绑定，就是触发元素上的事件，绑定的方法就会响应，如

//ts文件，组件
go() {
//表达式...
}

    <div (click)="go()">gogo</div>   //圆括号里面放事件

4花括号{{}}

使用花括号{{表达式}}这种方法称之为插值，可以放在模板中，注意里面的表达式可以直接取public的属性值，甚至可以直接调用函数。

  public getDate() {
    return new Date();
  }

<span>{{getDate()}}</span>