Question

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

EventEmitter。

@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";
  }
}

我的问题是，订阅观看数据更改时，所有这三种实现都可以正常工作。你如何决定何时使用一个而不是另一个，以及每个的缺点是什么。

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。

希望它可以帮到你，亨利

Answer 2

除了上述内容，我们需要使用事件发射器在子组件和父组件之间进行事件绑定。更好的是，我们避免订阅它，就好像将来不再使用它时，需要再次更改代码。因此，最好避免使用事件发射器，除了子组件和父组件之间的事件绑定外。在其他情况下，最好使用Observable。请检查此链接以获取详细信息... https://www.bennadel.com/blog/3038-eventemitter-is-an-rxjs-observable-stream-in-angular-2-beta-6.htm#comments_47949

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

2 个答案: