尖括号 [] () {} 它们绑定什么以及何时使用 which [重复]答案

【问题标题】：The angular brackets [] () {} what they bind and when to use which [duplicate]尖括号 [] () {} 它们绑定什么以及何时使用 which [重复]
【发布时间】：2019-09-12 09:02:40
【问题描述】：

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

下面的sn-ps是我经常使用的。但大多被认为是有记录的，但不明白为什么。

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

【问题讨论】：

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

以上所有语法都可以在 Angular 文档的 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。

【讨论】：

【解决方案2】：

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

【讨论】：