尖括号 [] () {} 绑定了什么，何时使用哪个

Question

我看到括号用于数据绑定，但有什么区别？

下面的片段是我经常使用的片段。但大多是记录在案，不明白为什么。

• [class]="myclass"
• (ngModelChange)="mymodel"
• [(ngModel)]="mymodel2"
• <ion-input placeholder="{{'INPUT_TEXT' | translate}}"/>
• <button>{{'BUTTON_TEXT'|translate}}</button>

Answer 1

以上所有语法都可以在 Angular 文档的此页面找到。如果您愿意，您可以在其他博客上阅读有关Angular模板语法的更多信息。

1)[class]="myclass"

方括号 [...] 表示从组件逻辑(数据)到视图(目标元素)的单向属性绑定。

2)(ngModelChange)

这表示事件绑定，它允许目标侦听某些事件，如单击和按键。

3)[(ngModel)]="mymodel2"

这表示双向数据绑定，它结合了上述两种语法。属性的数据显示在视图上，同时，当用户进行任何更改时，属性将更新。

4)<ion-input placeholder="{{'INPUT_TEXT' | translate}}"/>

您只需将另一个组件导入到当前组件中，placeholder属性就会通过模板插值INPUT_TEXT分配组件属性的值。

管道运算符 (|) 允许您执行显示值的转换。管道接受输入并返回相应的转换值

5) 类似于 4.

Answer 2

• [class]="myclass"->单向属性绑定，.ts中变量class的更改将反映在视图中。(从打字稿绑定到 HTML)
• (ngModelChange)="mymodel"->单向事件绑定，当发生modelChange事件时，执行表达式中存在的任何操作(从 HTML 到打字稿的单向绑定)
• [(ngModel)]="mymodel2" ->双向绑定，打字稿中变量mymode2的变化将反映在视图中，如果视图中发生任何更改，例如在输入中，则该更改也将反映在打字稿中。
• <ion-input placeholder="{{'INPUT_TEXT' | translate}}"/>-> 插入，当"{{}}"中的数据值发生变化时，占位符属性的值将更新
• <button>{{'BUTTON_TEXT'|translate}}</button>->再次，插值，只是不绑定到任何属性。