`value =＆＃34; {{todo.title}}＆＃34;`和`[value] =＆＃34; todo.title＆＃34;`之间的区别是什么？

Question

我一直在Angular 2做一个todo应用程序来掌握概念...... value="{{todo.title}}"和[value]="todo.title"之间的区别是什么？

Answer 1

来自Angular doc：

  

属性绑定还是插值？

     

我们经常在插值和属性绑定之间进行选择。以下绑定对执行相同的操作：

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

     

在许多情况下，插值是属性绑定的一种方便的替代方法。事实上，Angular会在渲染视图之前将这些插值转换为相应的属性绑定。

     

没有技术理由偏好一种形式到另一种形式。我们倾向于可读性，这往往有利于插值。我们建议建立编码风格规则，选择符合规则的形式，对于手头的任务感觉最自然。

Link

Answer 2

我们说我们有这个数据

todo = {
  title: 5
};

1）value="todo.title" - 名称为value且值为"todo.title"的属性（字符串）

2）value="{{todo.title}}" - 名称为value且值为"5"的属性（始终为字符串）

template_parser.ts 方法_parseAttr

因此，它不会被列为属性

3）[value]="todo.title" - 名称为value且值为5（数字）的属性

因此，这些表达式之间的区别在于插值（value="{{todo.title}}"）中的值总是字符串化，而基本属性绑定的值（{{1 }}）按原样传递。