angular - 尖括号 [] () {} 它们绑定(bind)什么以及何时使用哪个

Question

这个问题在这里已经有了答案:





What is the difference between parentheses, brackets and asterisks in Angular2?

(3 个回答)


3年前关闭。




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

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

[class]="myclass"

(ngModelChange)="mymodel"

[(ngModel)]="mymodel2"

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

<button>{{'BUTTON_TEXT'|translate}}</button>

Answer 1

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

1) [class]="myclass"
方括号 [...] 表示 one-way从组件逻辑(数据)到 View (目标元素)的属性绑定(bind)。

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

3) [(ngModel)]="mymodel2"
这代表 two-way data binding ，它结合了上述两种语法。该属性的数据显示在 View 上，同时，当用户进行任何更改时，该属性将被更新。

4) <ion-input placeholder="{{'INPUT_TEXT' | translate}}"/>
您只是将另一个组件导入到当前组件中，而 placeholder属性被分配组件属性的值 INPUT_TEXT通过template interpolation .

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

5) 类似于 4。