在 Dart 中使用 observables 进行 Angular2 变更检测

Question

在我用 Dart 编写的 Angular2 应用程序中，我有几个服务可以跟踪在视图中不一定具有任何特定关系的组件之间共享的数据。我需要任何组件启动的更新都反映在每个组件的显示中，我想要OnPush 更改检测的性能优势，我需要组件显示在创建组件之前可能已经设置的值，我想要所有这些用最少的样板来完成。

我的研究表明 Observables 可能是我需要的，但我一直无法在几个方面找到明确的答案。

在 Dart 中是否有与 Angular2 配合良好的 Observable 实现？

Observable 与 Dart Stream 有什么不同吗？特别是 Observable 是否支持获取当前值以及收到有关未来更新的通知？

最后但同样重要的是，假设 Observable 满足我的要求，声明组件的 Observable String 属性、使用从注入服务检索的 Observable 对其进行初始化、在组件的模板中显示其值（开始具有预先存在的值），并且对其值的更新会自动标记组件以进行推送更改检测？

如果 Observable 对此不起作用，我应该怎么做？我目前的想法是使用自定义Stream 子类，在新侦听器接收到的任何其他内容之前插入最新值，并通过async 管道发送它以处理从流中提取值并标记以进行更改检测。

我的理想解决方案在使用中应该是这样的：

@Injectable()
class MyService {
  @observable int health;
}

@Component(
    ...)
class MyComponent {
  @observable int health;
  MyComponent(MyService service) : health = service.health;
}

在模板中：

<span>{{health | async}}</span>

或者对于真正理想的情况，尽管这必须以某种方式连接到 Angular 的模板编译中（可能使用转换器？我还没有了解它们是如何工作的）：

<span>{{health}}</span>

只有这样，它就可以工作了。

我现在使用的自定义解决方案没有那么方便，但很接近。

Answer 1

对于集合和类，您可以使用https://pub.dartlang.org/packages/observe。它不是专门为与 Angular2 一起使用而设计的，而是为 Polymer 0.16.x 设计的，但它应该与 Angular2 OnPush 一起使用。

如果你让一个集合可观察

List myList = toObservable([]);

您可以订阅更改

myList.changes.listen((record) {
  // invoke Angular change detection
});

当类扩展 Observable 时（直接或通过应用 Observable mixin）

class Monster extends Unit with Observable {
  @observable int health = 100;

  void damage(int amount) {
    print('$this takes $amount damage!');
    health -= amount;
  }

  toString() => 'Monster with $health hit points';
}

您也可以订阅更改并通知 Angular

var obj = new Monster();
obj.changes.listen((records) {
  // invoke Angular change detection
});

注意：如果您有一个带有可观察类实例的可观察集合，则需要单独监听该集合和包含的类。该集合仅报告添加和删除，但不报告包含项目的属性更改。

Observable 与 Dart Stream 有什么不同吗？ ...

我认为 Dart Observable 与 Stream 的意义不同。 someObservable.changes 返回一个发出更改的Stream，但更改事件是由Observable 实现和从属性上的@observable 注释生成附加代码的转换器生成的。

除了收到有关未来更新的通知外，Observable 还支持获取当前值吗？

当您绑定到可观察对象的属性时，您会获得当前值。当值更改并且changes 订阅通知这些更改并且您通知 Angular 更改检测已发生更改时，Angular 会将绑定更新为最近的值。

声明组件的 Observable String 属性的最小语法，

上面的代码示例显示了int 属性，但使用String 时没有区别。