Angular 2:是否强制使用括号/方括号?
13501 观看
3回复
在到目前为止发布的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语法。
回应 (3)
12像
这不是强制性的 - 请看这里。
请查看指令部分(靠近页面中间):“装饰指令”仍然存在,这意味着您的问题。
肯定会有回落的方式。
结帐官方演示:ng-model
/ click
也用于此。
46像
实际上,[]
它()
是属性中有效的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:360像
让我尝试一个能够清除你想法的例子。
考虑一下代码:
get test() {
return true;
}
如果使用以下代码,则“[visible]”属性将“test”作为值接收。
<input tybe="button" [visible]="test" />
但是如果你使用:
<input type="button" (visible)="test"
它接收“test”方法的值。
如果我做错了,请有人纠正我。
作者: Moacir 发布者: 12.11.2018 09:55来自类别的问题 :
- angular 如何查看我使用的Angular版本?
- angular AngularJS:如何清除URL中的查询参数?
- angular angular:根据模型中的布尔值切换按钮文本
- angular Angular 2:是否强制使用括号/方括号?
- angular 在最新的TypeScript(大概是v1.5)示例中,@(符号)是什么意思?
- angular Angular 2.0绑定到样式的值
- angular Angular没有NameService的提供者
- angular 如何在Angular中使用jQuery?
- angular 如何使FileReader与Angular2一起使用?
- angular 如何在Angular 2中的组件之间共享数据?
- angular 如何在Angular2中订阅服务上的事件?
- angular Angular 2.0路由器无法重新加载浏览器
- angular 在Angular中迭代对象
- angular Angular HTML绑定
- angular Angular2验证器,它依赖于多个表单字段
- angular 具有多个视图的Angular 2组件
- angular 抓住Angular 2例外
- angular 角度和去抖动
- angular 如何禁用“提交”按钮?
- angular 有人知道如何在Angular2中触发Form Validators吗?