何時使用Observable vs EventEmitter vs Dot Rule進行angular2中的變化檢測

Question

我看到有三種方法可以管理Angular2中的變更檢測。

1. 觀測

    @Injectable() export class TodosService { todos$: Observable<Array<Todo>>; private _todosObserver: any; private _dataStore: { todos: Array<Todo> }; constructor(private _http: Http) { // Create Observable Stream to output our data this.todos$ = new Observable(observer => this._todosObserver = observer).share(); this._dataStore = { todos: [] }; } } 

2. EventEmitter。

    @Injectable() class NameService { name: any; nameChange: EventEmitter = new EventEmitter(); constructor() { this.name = "Jack"; } change(){ this.name = "Jane"; this.nameChange.emit(this.name); } } 

3. 點規則

    export interface Info { name:string; } @Injectable() class NameService { info: Info = { name : "Jack" }; change(){ this.info.name = "Jane"; } } 

我的問題是，訂閱觀看數據變化時，所有三種實現都可以工作。 你如何決定何時使用一個而不是另一個，以及每個的缺點是什么。

Answer 1

我們試着給你一些提示......

最后一種方法的主要問題是它不適用於原始類型，而只適用於引用。 所以我不推薦它......

我認為EventEmitter / Observable是實現和處理自定義事件的正確方法。 它還鏈接到組件本身（ @Ouput ），模板中的雙向映射（語法[(...)] ）和async管道。

從文檔中， EventEmitter使用Observable但提供了一個適配器，使其按照此處的指定工作： https ： //github.com/jhusain/observable-spec 。 在查看EventEmitter類之后，它擴展了Subject類。 它不僅僅是一個簡單的Observable 。 有關詳細信息，請參閱此鏈接： https ： //github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md

關於自定義observable的創建，我會說：只有在需要特定的東西時才創建自​​己的observable。 否則使用EventEmitter類。 但是你可以用EventEmitter類和可觀察的運算符做很多事情。

總而言之，在這樣一個“簡單”的用例中，事情並不那么明顯，但在更復雜的場景中， EventEmitter / Observable允許使用運算符定義處理鏈。 經典示例是根據input的值更新列表（此處在字段的this.term定義ngModel ）：

this.term.valueChanges
     .debounceTime(400)
     .flatMap(term => this.dataService.getItems(term))
     .subscribe(items => this.items = items);

這篇來自Christoph Burgdorf的精彩博文可以為您提供有關觀察者可以處理的內容的一些想法： http ： //blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html 。

希望它對你有幫助，蒂埃里

Answer 2

除此之外，我們還需要使用Event Emitter來實現子組件和父組件之間的事件綁定。 我們更好地避免訂閱它，就像將來不推薦使用它一樣，代碼需要再次更改。 因此，除了子組件和父組件之間的事件綁定之外，最好避免使用事件發射器。 在其他情況下，最好使用Observable。 請查看此鏈接了解詳細信息... https://www.bennadel.com/blog/3038-eventemitter-is-an-rxjs-observable-stream-in-angular-2-beta-6.htm#comments_47949