[]和{{}}之间的区别是绑定状态到属性?

时间:2016-04-26 10:49:12

标签: angular angular2-template

这是一个模板示例:

<span count="{{currentCount}}"></span>
<span [count]="currentCount"></span>

这两个人都做同样的事情。哪一个是首选,为什么?

3 个答案:

答案 0 :(得分:20)

$gnuplot --version gnuplot 4.6 patchlevel 4 用于从父组件中的值绑定到子组件中的[]。它允许传递对象。

@Input()用于绑定属性和HTML中的字符串,如

{{}}

其中绑定可以是字符串的一部分。

<div somePropOrAttr="{{xxx}}">abc {{xxx}} yz</div> 用于绑定在触发DOM事件或子组件上的()发出事件时调用的事件处理程序

EventEmitter

Plunker example

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

中的更多详情

答案 1 :(得分:2)

字符串插值和属性绑定之间的区别:

主要了解以下内容:

  

插值是Angular转换为属性的一种特殊语法   捆绑。这是属性绑定的便捷替代方法。

这意味着在幕后它会产生相似的结果。但是,字符串插值有一个重要限制。这是首先将评估字符串插值中的所有内容(尝试从ts模型文件中查找值):

  • 如果在那里找不到该值,则字符串插值内的值将被评估为字符串。
  • 如果在模型中找到此值,则将找到的值强制转换为字符串并使用。

这对如何使用这两种方法有一些影响。例如:

  1. 带有字符串插值的字符串连接:

      <img src=' https://angular.io/{{imagePath}}'/>
    
  2. 除字符串外,字符串插值不能用于其他任何用途

      <myComponent  [myInput]="myObject"></myComponent>
    

myInput@Input()的{​​{1}}时,如果要传递对象,则必须使用属性绑定。如果我们要使用字符串插值,则该对象将变成字符串,并将其作为myComponent的值传递。

答案 2 :(得分:0)

战斗结束后我来得有点晚:),但是据我了解,还有另一个差异,有时可能非常重要。 顾名思义,“属性绑定”意味着您要绑定到HTML元素“对象”的属性(对应于DOM中的“目标”表示形式),wihch与字符串插值,可以应用于HTML元素标签属性,这就是为什么在与未解析/可解析的实体对话时只能在其中放入字符串的原因。

通常,您在这两者之间有直接对应关系(html中的标记具有foo属性,该属性链接到DOM对象的foo属性),但这不是一条规则,您可以拥有的属性不链接到属性以及相反的属性。

顺便说一句,您在堆栈溢出中有一个很好的答案,深刻解释了两者之间的区别:What is the difference between properties and attributes in HTML?