尖括号[]（）{}它们绑定的内容以及何时使用

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