dart - 在 Dart 中使用可观察对象进行 Angular2 变化检测

Question

在我用 Dart 编写的 Angular2 应用程序中，我有几个服务可以跟踪在 View 中不一定有任何特定关系的组件之间共享的数据。我需要由任何组件发起的更新反射(reflect)在每个组件的显示中，我想要 OnPush 更改检测的性能优势，我需要组件显示可能在创建组件之前设置的值，并且我希望所有这些都以最少的样板文件来完成。

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

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

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

最后但同样重要的是，假设 Observable 满足我的要求，声明组件的 Observable String 属性的最小语法是什么，使用从注入(inject)服务检索的 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
});

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

Is an Observable meaningfully different from a Dart Stream? ...

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

In particular does an Observable support getting the current value in addition to being notified about future updates?

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

the minimal syntax for declaring an Observable String property of a component,

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