何时使用 Observable vs EventEmitter vs Dot Rule 在 angular2 中进行变化检测答案

【问题标题】：When to use Observable vs EventEmitter vs Dot Rule for change detection in angular2何时使用 Observable vs EventEmitter vs Dot Rule 在 angular2 中进行变化检测
【发布时间】：2018-07-18 14:05:25
【问题描述】：

我见过三种方法来管理 Angular2 中的变更检测。

可观察的

@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: [] };
    }
}

事件发射器。

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

点规则

export interface Info {
   name:string;
}

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

我的问题是，订阅观察数据变化时，所有三种实现都可以工作。您如何决定何时使用其中一种而不是另一种，以及每种方法的缺点是什么。

【问题讨论】：

点规则的一个缺点：它是隐式的而不是显式的。到目前为止，我更喜欢 EventEmitter。
点规则是什么意思？

标签： angular

【解决方案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 的这篇很棒的博文可以为您提供一些关于 observables 可以处理什么的想法：http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html。

希望对你有帮助蒂埃里

【讨论】：

附带说明：根据documentation for EventEmitter，它实际上应该只由组件和指令使用；暗示它似乎不适用于首选 Observables 的服务。我发现this 的回答很有用。

【解决方案2】：

除此之外，我们还需要使用 Event Emitter 来实现子组件和父组件之间的事件绑定。我们最好避免订阅它，因为如果将来不推荐使用它，则需要再次更改代码。所以最好避免使用事件发射器，除了子组件和父组件之间的事件绑定。在其他情况下最好使用 Observable 的。请检查此链接以获取详细信息... https://www.bennadel.com/blog/3038-eventemitter-is-an-rxjs-observable-stream-in-angular-2-beta-6.htm#comments_47949

【讨论】：