javascript - Angular 2 输入绑定(bind)与字符串更改检测

Question

假设我有以下组件:

class TestComponent {
  @Input() title;
}

使用带括号和不带括号的变化检测有区别吗？

<test [title]="title"></test>
<test [title]="'Component Title'"></test>  
<test title="Component Title"></test> 

更准确地说，静态版本也会在每次更改检测时进行检查吗？

Answer 1

既然你声明了 @Input，Angular 就会为它们创建绑定(bind)。它会将其添加到在变更检测周期中调用的 updateDirectives 函数。

所以如下

<test [title]="title"></test>
<test [title]="'Title2'"></test>
<test title="Title3"></test>

将呈现为:

updateDirective(_ck, v) {
  var _co = _v.component;
  var currVal_1 = _co.title;
  _ck(_v,4,0,currVal_1);
  var currVal_2 = 'Title2';
  _ck(_v,7,0,currVal_2);
  var currVal_3 = 'Title3';
  _ck(_v,10,0,currVal_3);
}

Live Example

这里的主要区别是 Angular 读取 @Input 绑定(bind)并为 title="Title3"case 创建属性。如果您不声明 @Input，则只会创建属性。