在 Angular 框架中,[()] 这种语法通常被称作 “香蕉箱子”(Banana in a Box),它实际上是两个 Angular 语法的结合:[] 代表属性绑定(Property Binding),而 () 代表事件绑定(Event Binding)

属性绑定用于将组件的属性绑定到模板的某个元素上,使得属性值能够动态更新 DOM。事件绑定则用于监听 DOM 事件,并将这些事件映射到组件的方法上

 

它实际上是 ngModel 这个指令的简写形式,用于双向数据绑定,允许你在表单元素和数据模型之间建立实时同步,即模型的变化会反映到视图上,视图上的变化也会更新到模型中

 

示例:

这行代码会确保 input 元素的值与组件中 myProperty 属性的值保持同步。任何在输入框中的输入都会更新 myProperty,反之亦然

<input type="text" [(ngModel)]="myProperty">

最后

这种 [()] 的语法之所以被广泛称为 “香蕉箱子”,是因为 [(ngModel)] 看起来像是 [ngModel] 和 (ngModelChange) 的结合,形状类似一个香蕉放在方括号(箱子)里