2016-03-08 44 views
4

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

我的研究表明Observable可能是我需要的,但我几次都找不到明确的答案。

Dart中的Observable的实现是否与Angular2兼容?

是一个可观的有意义的不同于飞镖流吗?除了被通知未来更新之外,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> 

或为真正理想的,虽然这样的挂接到角的模板编译莫名其妙(也许用变压器?我还没有学会如何工作):

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

就这样,它就会起作用。

我现在有工作的自定义解决方案不是那么方便,但它很接近。

回答

2

对于收藏品和课程,您可以使用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混入)

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'; 
} 

你也可以订阅更改并通知角

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

注意:如果你有一个观察类的实例可观察集合,你要听的收集和单独含有类。该集合只报告添加和删除,但不包含包含项目的属性更改。

是一个可观察的有意义的不同于飞镖流吗? ...

我觉得飞镖Observable是有意义的不同于StreamsomeObservable.changes返回发出更改的Stream,但该更改事件由Observable实现和从属性上的@observable注释生成附加代码的转换器生成。

特别是Observable支持获取当前值以及被通知未来更新吗?

当你绑定到observable的属性时,你会得到当前值。当值更改并且订阅通知了这些更改并且您通知角度更改检测发生了更改时,Angular会将绑定更新为最新值。

最小语法来声明组件的可观察到的String属性,

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

+1

如果我正在阅读文档,我需要用'dirtyCheck()'反复轮询对象,或者在每个设置器中用样板实现'ChangeNotifier',并以任意方式手动连接每个对象的'.changes。 listen()'到Angular2的'ChangeDetectorRef.markForCheck()'。对于一个好的解决方案来说,这是多次重复的代码。它比我发现的任何东西都更接近我所需要的,但看起来我可能需要自定义解决方案。 – Douglas

+1

这听起来是正确的。自从我自己使用它以来已经有一段时间了。 –

+0

您可以扩展//调用角度更改检测 –