Angular 2：是否必须使用圆括号/方括号？

Question

在目前发布的 Angular 2 个预览中，标记的语法已从 ng- 前缀修改为方括号和方括号。

而以前会有：

<input ng-model="userName" />
<button ng-click="btnClick()">Run</button>

新语法是：

<input [value]="userName" />
<button (click)="btnClick()">Run</button>

有人知道这种语法 is/will 是强制性的吗？

我们目前有一个应用程序，其中 HTML 是通过 XSLT 生成的，并且 [ 和 ( 不是有效属性 - 因此无法生成 Angular 2 JS语法。

Answer 1

这不是强制性的 - 请参阅 here。

请查看指令部分（靠近页面中间）： "Decorator Directive" 仍然存在，这意味着关于您的问题。

肯定会有退路。

也进行结帐 the official demonstration：ng-model/click 也用于此。

Answer 2

事实上，[] 和 () 是属性中的有效 HTML 个字符。如果您在服务器端生成 HTML 代码或使用任何其他无法处理这些字符的预处理器，您始终可以使用等效的规范语法。

[] 是 bind-* 的 shorthand，因此 [propertyName] == bind-property-name
() 是 on-* 的 shorthand，因此 (eventName) == on-event-name

使用此语法主要有两个原因（并且实际上是强制性的）：

Escaping - 元素属性需要转义。如果您有一个带有动态 src 的图像标签，如下所示：<img src="{{imageSource}}"> 这将导致 404 错误，因为浏览器会立即尝试请求给定的 URL。该特定时刻的 URL 是 {{imageSource}}，这肯定不是有效的 URL。因此我们在 Angular 1 中有 ngSrc 属性。我们可以像 <img ng-src="{{imageSource}}"> 一样使用它。它所做的是，它一直等到插值被评估 ，然后 添加图像的 src 属性。这确保不会由于异步插值评估而发出错误请求。还有一些指令可以帮助解决这个问题，比如 ng-href。现在，当谈到 Web 组件时，属性名称不再是确定性的。 Web Components 可以定义框架不知道的自己的属性。所以我们有两个选择：我们要么为每个需要转义的属性创建一个指令（哦，不！），要么我们想出一个 Angular 理解的更通用的语法，并让框架相应地拦截。这就是引入 [propertyName] 的原因。同样，这只是一个捷径。如果规范语法不适合您，请使用规范语法。
属性绑定 - 现在您可能想知道为什么 [propertyName] 而不是 [attributeName]。事实证明，我们在处理自定义元素时遇到了另一个问题，这些元素不知道 Angular 的指令生命周期。在 Angular 中，我们可以决定如何将值绑定到元素的范围。所以在这段代码中：<my-directive foo="bar">、bar 可以只是字符串，也可以是双向数据绑定的对象。我们只知道通过查看指令的实现。但是，Web 组件和自定义元素根本不知道 Angular 的生命周期。这意味着，属性值始终是一个字符串，因为这就是 HTML 中的属性。为了确保我们仍然可以将字符串之外的其他值传递给任何元素，Angular 2 绑定到元素属性而不是属性。因为 DOM 元素对象上的属性可以是任何东西，而不仅仅是一个字符串。因此，使用 [] 语法，我们还告诉 Angular 我们确实想要绑定到元素的属性，而不是它的属性。这也意味着现在 directive/element/webcomponent 的消费者负责决定如何将值传递给它。

我写了一篇article about it that covers that topic, also there's a talk from ngeurope。

我希望这能解决问题！[=33=]

Answer 3

让我举个例子来理清你的思路。

考虑代码：

get test() {
    return true;
}

如果您使用以下代码，"[visible]" 属性接收 "test" 作为值。

<input type="button" [visible]="test" />

但是如果你使用：

<input type="button" (visible)="test" />

它接收"test"方法的值。

换句话说，[] 绑定了属性而 () 绑定了事件。如果我做错了，请有人纠正我。

更多详情here and here

希望对您有所帮助。

Angular 2：是否必须使用圆括号/方括号？

Angular 2: Is usage of Parentheses / Square brackets mandatory?

angular