25

在迄今为止发布的 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 语法。

4

3 回答 3

52

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

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

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

  • 转义- 元素属性需要转义。如果您有一个带有如下动态的图像标签src：<img src="{{imageSource}}">这将导致404错误，因为浏览器会立即尝试请求给定的 URL。那个特定时刻的 URL{{imageSource}}肯定不是有效的 URL。因此我们ngSrc在 Angular 1 中有这个属性。我们可以像<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 我们确实想绑定到元素的属性，而不是属性。这也意味着现在指令/元素/webcomponent 的使用者负责决定如何将值传递给它。

我已经写了一篇关于它的文章，涵盖了该主题，还有来自ngeurope的演讲。

我希望这能解决问题！

于 2015-06-16T09:36:40.990 回答
14

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

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

肯定会有退路。

也请查看官方演示：ng-model/click也用于其中。

于 2015-01-13T10:20:17.637 回答
0

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

考虑代码：

get test() {
    return true;
}

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

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

但是如果你使用：

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

它接收“test”方法的值。

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

更多细节在这里和这里

我希望它有所帮助。

于 2018-11-12T21:55:25.633 回答