2016-03-08 43 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

您可以擴展//調用角度更改檢測 –