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

Dou*_*las 5 observable dart angular2-changedetection angular

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

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

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

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

最后但并非最不重要的是,假设 Observable 满足我的要求,声明组件的 Observable String 属性的最小语法是什么,使用从注入的服务中检索到的 Observable 对其进行初始化,在组件的模板中显示其值(以 pre 开头) -现有值),并且更新其值会自动标记组件以进行推送更改检测?

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

我理想的解决方案在使用中看起来像这样:

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

@Component(
    ...)
class MyComponent {
  @observable int health;
  MyComponent(MyService service) : health = service.health;
}
Run Code Online (Sandbox Code Playgroud)

在模板中:

<span>{{health | async}}</span>
Run Code Online (Sandbox Code Playgroud)

或者对于真正理想的情况,尽管这必须以某种方式挂钩到 Angular 的模板编译(也许使用转换器?我还没有了解它们是如何工作的):

<span>{{health}}</span>
Run Code Online (Sandbox Code Playgroud)

有了这个,它就会起作用。

我现在使用的自定义解决方案并不像那样方便,但已经很接近了。

Gün*_*uer 2

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

如果你让一个集合变得可观察

List myList = toObservable([]);
Run Code Online (Sandbox Code Playgroud)

您可以订阅更改

myList.changes.listen((record) {
  // invoke Angular change detection
});
Run Code Online (Sandbox Code Playgroud)

当类扩展时Observable(直接或通过应用Observablemixin)

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';
}
Run Code Online (Sandbox Code Playgroud)

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

var obj = new Monster();
obj.changes.listen((records) {
  // invoke Angular change detection
});
Run Code Online (Sandbox Code Playgroud)

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

Observable 与 Dart Stream 有显着不同吗?...

我认为 DartObservableStream. 返回发出更改的someObservable.changesa ,但更改事件是由实现和转换器生成的,转换器从属性上的注释生成附加代码。StreamObservable@observable

特别是,除了接收有关未来更新的通知之外,Observable 是否还支持获取当前值?

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

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

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