angular2에서 변경 감지를 위해 Observable vs EventEmitter vs Dot Rule을 사용하는 경우

angular2에서 변경 감지를 위해 Observable vs EventEmitter vs Dot Rule을 사용하는 경우

---

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

제 질문은 데이터 변경 사항을보기 위해 구독 할 때 세 가지 구현 모두 작동 할 수 있다는 것입니다. 다른 하나 대신 사용할 때와 각각의 단점을 어떻게 결정합니까?

---

힌트를 좀 드릴까요 ...

마지막 접근 방식의 주된 문제는 기본 유형에서는 작동하지 않고 참조에서만 작동한다는 것입니다. 그래서 추천하지 않겠습니다 ...

EventEmitter/ Observable가 사용자 지정 이벤트를 구현하고 처리하는 올바른 접근 방식 이라고 생각 합니다. 또한 구성 요소 자체 ( @Ouput), 템플릿의 양방향 매핑 (구문 [(...)]) 및 async파이프에 연결됩니다.

설명서에서는 https://github.com/jhusain/observable-spec에 지정된대로 작동하도록 어댑터를 EventEmitter사용 Observable하지만 제공합니다 . Angular2 의 클래스를 살펴본 후 클래스를 확장합니다 . 단순한 . 자세한 내용은이 링크를 참조하십시오 : https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.mdEventEmitterSubjectObservable

커스텀 옵저버 블 생성과 관련하여, 특정 항목이 필요할 때만 자신 만의 옵저버 블을 생성합니다. 그렇지 않으면 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의이 훌륭한 블로그 게시물은 Observable이 처리 할 수있는 것에 대한 몇 가지 아이디어를 제공 할 수 있습니다 : http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html .

도움이 되었기를 바랍니다, Thierry

---

Adding to the above, we need to use Event Emitter for event binding between a child and parent component. Its better we avoid subscribing to it, as if and when it is deprecated in future, the code would need to be changed again. So better avoid using Event emitters except for event binding between a child and parent component. In other scenarios it best to use Observable's. Please check this link for details... https://www.bennadel.com/blog/3038-eventemitter-is-an-rxjs-observable-stream-in-angular-2-beta-6.htm#comments_47949

ReferenceURL : https://stackoverflow.com/questions/34717451/when-to-use-observable-vs-eventemitter-vs-dot-rule-for-change-detection-in-angul