Question

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

然而才会有：

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

新语法是：

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

有人知道这种语法是否是强制性的，而且没有替代方案？

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

Answer 1

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

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

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

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

我已经撰写了一篇涵盖该主题的article，还有来自ngeurope的演讲。

我希望这能解决问题！

Answer 2

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

请查看指令部分（靠近页面中间）：＆＃34;装饰指令＆＃34;仍在那里，这意味着你的问题。

肯定会有退步的方式。

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

Answer 3

让我尝试一个示例，该示例可以清除您的想法。

考虑代码：

get test() {
    return true;
}

如果使用以下代码，则“ [visible] ”属性将接收“ test” 作为值。

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

但是，如果您使用：

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

它接收“ test” 方法的值。

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

更多详细信息here和here

希望对您有帮助。

Angular 2：是否强制使用括号/方括号？

3 个答案: