为什么 Angular 2 或 Angular 4 使用香蕉括号？有什么具体原因吗？为什么它们不遵循与 Angular 1 相同的模式？

Question

我知道，它与任何编码无关，但它们可以遵循与 AngularJS 中相同的语法

<input ng-model="hero.name" placeholder="name" type="text">

到目前为止 Angular 2 及其大版本语法

 <input [(ngModel)]="hero.name" placeholder="name" type="text">

如果他们这样做，这对人们适应 Angular JS 的变化将会非常有帮助？

类似地，

ng-repeat

，他们改为

ngFor

<ul ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ul>

<ul ng-repeat="item in items track by myTrackingFunction(n)">
<li>...</li>
</ul>

Answer 1

香蕉支架用于双向装订。

看

绑定语法：

数据绑定是一种协调用户所见内容的机制， 应用数据值。虽然您可以将值推入或拉出 来自 HTML 的值，应用程序更易于编写、阅读和使用 如果您将这些杂务交给绑定框架，则可以维护。你 只需声明绑定源和目标 HTML 之间的绑定 元素并让框架来完成工作。

Angular 提供了多种数据绑定。本指南涵盖了大部分内容 在对 Angular 数据绑定及其语法进行高级视图之后，了解它们。

绑定类型可分为三类，按 数据流向：从源到视图，从 视图到源，并且按照双向顺序：视图到源到视图。

Answer 2

香蕉括号...

[()]

这是角度中双向数据绑定的标准方式。它是一个 getter 和 setter。

[]

用于setter，而

()

用于getter，因此将它们组合起来可以实现

ngModel

的双向数据绑定。

Setter

[]

可以引导您实现 单向绑定。

---

Angular (2,4+) 是 Angular1 的完全重写，因为 Angular 采用了 TypeScript 作为它的基础语言，并且它是用 TypeScript 完全重写的。 Typescript 拥有所有最新的 javascript 功能+类型。这可以让你确定逻辑中的数据流是什么类型。

但这并不能阻止用户使用 AngularJS，任何人都可以使用，因为它也在开发中，并且他们正在尝试找到将 AngularJS 迁移到 Angular 的简单方法。

Answer 3

盒子里的香蕉它只是双向数据绑定的模板语法 它结合了属性绑定和事件绑定。

所以而不是明确地写出来：

<my-input [text]="val" (textChange)="val=$event"></my-input>

我们可以利用缩短的语法：

<my-input [(text)]="val"></my-input>

为什么命名为“盒子里的香蕉”？ 命名有助于我们记住双向数据绑定的括号顺序。

[] = box
() = banana.
[()] = banana in a box 😃

这里是解释。