Angular 绑定(bind)到函数结果

Question

我一直在浏览 angular.io 上的指南并发现 the section on the NgClass directive 。 在提供的示例中，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 打开 ngRepeat 在可见页面上创建约 200 个元素。

作为一个侧面节点和较小的问题，我想知道是否有什么好的 了解一次性绑定(bind)的资源(在 Angular2 与 Angular1 中)。这 指南似乎没有涵盖这一点，我希望有一个异步的 时间绑定(bind)在 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 方法为每次调用返回一个不同的实例，这使得 ngClass 中的比较更加昂贵。如果只要没有更改依赖关系就返回相同的实例，则绑定(bind)到方法 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 不支持一次性绑定(bind)。