Когда использовать Observable vs EventEmitter vs Dot Rule для обнаружения изменений в angular2

Есть три метода, которые я видел для управления обнаружением изменений в 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);
  }
}

  • Правило Dot

    export interface Info {
   name:string;
}

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

Мой вопрос: все три реализации могут работать при подписке на просмотр изменений в данных. Как вы решаете, когда использовать один вместо другого, и каковы недостатки каждого из них.

Ответы

Ответ 1

Попробуем дать вам несколько советов...

Основная проблема последнего подхода заключается в том, что он не работает с примитивными типами, а только со ссылками. Поэтому я бы не рекомендовал его...

Я думаю, что EventEmitter/Observable - правильный подход к реализации и обработке настраиваемых событий. Он также связан с самими компонентами (@Ouput), двунаправленным отображением в шаблонах (синтаксис [(...)]) и async.

В документации EventEmitter используется Observable, но предоставляется адаптер, чтобы он работал, как указано здесь: https://github.com/jhusain/observable-spec. Посмотрев класс EventEmitter Angular2, он расширяет класс Subject. Это немного больше, чем просто Observable. См. Эту ссылку для получения более подробной информации: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md

Что касается создания пользовательского наблюдаемого, я бы сказал: создайте свои собственные наблюдаемые только тогда, когда вам нужно что-то конкретное. В противном случае используйте класс EventEmitter. Но есть много вещей, которые вы можете сделать с классом EventEmitter и наблюдаемыми операторами.

В заключение, в таком "простом" варианте использования все не так очевидно, но в более сложных сценариях EventEmitter/Observable позволяют определить цепочку обработки с использованием операторов. Классическим примером является обновление списка в соответствии со значением для input (здесь this.term, определенного в поле ngModel):

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

Это замечательное сообщение в блоге от Кристофа Бургдорфа может дать вам некоторые идеи о том, что могут наблюдать наблюдаемые: http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html.

Надеюсь, это поможет вам, Thierry