Angular 绑定到函数结果

Question

我一直在阅读 angular.io 上的指南并遇到了部分在 NgClass 指令上。在提供的示例中，ngClass 的源代码是一个组件函数：

// HTML
<div [ngClass]="setClasses()">This div is saveable and special</div>

// Controller
setClasses() {
  let classes =  {
    saveable: this.canSave,      // true
    modified: !this.isUnchanged, // false
    special: this.isSpecial,     // true
  };
  return classes;
}

考虑到这不会在摘要周期中产生大量开销该指令不知道函数的结果何时发生变化，并且会在每个摘要周期中触发对功能的新评估吗？在对比我希望下面的代码提供相同的功能但只有当观察到的值之一有已更改（canSave、isUnchanged、isSpecial）。

<div [ngClass]="{ saveable : canSave, modified : !isUnchanged, special: isSpecial }">This div is saveable and special</div>

有人可以阐明我应该考虑什么吗？优化性能？一个示例用例是启用此 ngClass 在可见页面上创建 ~200 个元素的 ngRepeat。

作为一个边节点和较小的问题，我想知道是否有什么好的了解一次性绑定的资源（在 angular2 与 angular1 中）。这指南似乎没有涵盖这一点，我希望有一个异步的时间绑定在 angular2 中可用。

Answer 1

Does this not create a large overhead during the digest cycle considering the directive does not know when the result of the function has changed and would trigger a new evaluation of the function during each digest cycle? In contrast I'd expect the following code to provide the same functionality but to only re-evaluate specifically when one of the observed values have changed (canSave, isUnchanged, isSpecial).

你的结论是正确的。

setClasses 方法 returns 每次调用一个不同的实例，这使得 ngClass 中的比较成本更高。如果只要没有更改依赖项就返回相同的实例，则绑定到方法 this 方式很好。

这个问题最近得到了解决。 https://github.com/angular/angular.io/issues/3072

As a side node and smaller question I was wondering if there is any good resource to learn about one-time binding (in angular2 vs angular1). The guide does not appear to cover this and I was hoping to have an async one time bind available in angular2.

Angular2 不支持一次性绑定。

Angular 绑定到函数结果

Angular binding to function results

watch

angularjs-digest

angular