Question

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

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

Dart中的Observable实现是否适用于Angular2？

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＆lt; = 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还特别支持获取当前值吗？

绑定到observable的属性时，您将获得当前值。当值更改并且changes订阅通知有关这些更改并且您通知Angular更改检测已发生更改时，Angular将更新绑定到最近的值。

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

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

使用Dart中的observable进行Angular2变化检测

1 个答案: