尖括号[]（）{}它们绑定什么以及何时使用[重复]

Question

这个问题在这里已有答案：

• What is the difference between parentheses, brackets and asterisks in Angular2? 4个答案

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

以下片段是我经常使用的片段。但大部分时间都是在没有理解原因的情

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

Answer 1

所有上述语法都可以在Angular Documentation的page中找到。如果您愿意，可以在其他博客上阅读有关Angular模板语法的更多信息。

1）[class]="myclass"

方括号[...]表示从组件逻辑（数据）到视图（目标元素）的one-way属性绑定。

2）(ngModelChange)

这代表event binding，它允许目标监听某些事件，如点击和按键。

3）[(ngModel)]="mymodel2"

这代表two-way data binding，它结合了上述两种语法。属性的数据显示在视图上，同时，当用户进行任何更改时，属性将更新。

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

您只需将另一个组件导入当前组件，并通过placeholder为INPUT_TEXT属性指定组件属性template interpolation的值。

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

5）类似于4。

Answer 2

• [class]="myclass" - >单向属性绑定，class中变量.ts的变化将反映在视图中。 （从打字稿到HTML绑定）
• (ngModelChange)="mymodel" - >单向事件绑定，当发生modelChange事件时，执行表达式中存在的任何内容，（从HTML到typescript的单向绑定）
• [(ngModel)] =“mymodel2” - >双向绑定，打字稿中变量mymode2的变化将反映在视图中，如果视图中发生任何变化，就像在输入中一样，那么该变化也会反映在打字稿中。
• qazxsw poi - >插值，当qazxsw poi中的数据值发生变化时，占位符属性的值将被更新
• <ion-input placeholder="{{'INPUT_TEXT' | translate}}"/> - >再次，插值，只是没有绑定任何属性。