angular - 何时使用 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. 事件发射器。

   @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 .看了Angular2的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 .

希望对你有帮助，蒂埃里