尖括号 [] () 它们绑定啥以及何时使用 which [重复]

Posted 2023-02-22

【中文标题】尖括号 [] () 它们绑定啥以及何时使用 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>

【参考方案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> -> 再次，插值，只是没有绑定到任何属性。