新语法是:有人知道这个语法是否是强制性的,没有其他选择?目前,我们在这是通过XSLT生成的HT" />

Angular 2:是否强制使用括号/方括号?

angular

13501 观看

3回复

110 作者的声誉

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

而在之前会有:

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

新语法是:

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

有人知道这个语法是否是强制性的,没有其他选择?

目前,我们在这是通过XSLT生成的HTML应用程序,并[(无效的属性-从而暂时无法生成角2 JS语法。

作者: Filipe Toscano 的来源 发布者: 2015 年 1 月 13 日

回应 (3)


12

1644 作者的声誉

决定

这不是强制性的 - 请看这里

请查看指令部分(靠近页面中间):“装饰指令”仍然存在,这意味着您的问题。

肯定会有回落的方式。

结帐官方演示ng-model/ click也用于此。

作者: divyenduz 发布者: 13.01.2015 10:20

46

6571 作者的声誉

实际上,[]() 属性有效的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我们确实希望绑定到元素的属性,而不是它的属性。这也意味着现在指令/元素/ web组件的使用者负责决定如何将值传递给它。

我写了一篇关于它的文章,涵盖了这个主题,也有来自ngeurope的讨论。

我希望这能解决问题!

作者: Pascal Precht 发布者: 16.06.2015 09:36

0

1 作者的声誉

让我尝试一个能够清除你想法的例子。

考虑一下代码:

get test() {
    return true;
}

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

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

但是如果你使用:

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

它接收“test”方法的值。

如果我做错了,请有人纠正我。

作者: Moacir 发布者: 12.11.2018 09:55
32x32