각도 2의 변경 감지에 대해 관찰 가능한 대 이벤트 이미터 대 점 규칙을 사용하는 경우

각도 2의 변경 감지에 대해 관찰 가능한 대 이벤트 이미터 대 점 규칙을 사용하는 경우

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

제가 묻고 싶은 것은 세 가지 구현이 모두 데이터의 변화를 관찰하기 위해 구독할 때 작동할 수 있다는 것입니다.다른 것 대신에 어떤 것을 사용할지, 그리고 각각의 단점은 무엇인지 어떻게 결정합니까?

힌트를 좀 드리죠

마지막 접근법의 주요 문제는 원시 유형에서는 작동하지 않고 참조에서만 작동한다는 것입니다.그래서 추천하지 않을 것입니다.

나는 생각합니다.EventEmitter/Observable맞춤형 이벤트를 구현하고 처리하는 데 적합한 접근 방식입니다.또한 구성요소 자체와도 연결됩니다.@Ouput), 템플릿의 양방향 매핑(계속)[(...)]) 및 그async파이프를 피우다

설명서에서 볼 때,EventEmitter사용하다Observable그러나 여기에 지정된 대로 작동할 수 있는 어댑터를 제공합니다. https://github.com/jhusain/observable-spec를 보고 난 후에EventEmitterAngular2의 클래스, 그것은 확장합니다.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);

Christoph Burgdorf의 이 훌륭한 블로그 게시물은 관찰할 수 있는 것이 무엇인지에 대한 아이디어를 줄 수 있습니다: http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html .

도움이 되길 바래, 티에리

위에 추가하여 자식 구성 요소와 부모 구성 요소 간의 이벤트 바인딩을 위해 이벤트 이미터를 사용해야 합니다.나중에 더 이상 사용되지 않을 경우 코드를 다시 변경해야 하는 것처럼 구독을 피하는 것이 좋습니다.따라서 자식 구성 요소와 부모 구성 요소 간의 이벤트 바인딩을 제외하고는 이벤트 이미터를 사용하지 않는 것이 좋습니다.다른 시나리오에서는 관찰 가능한 것을 사용하는 것이 가장 좋습니다.자세한 내용은 이 링크를 확인하십시오...https://www.bennadel.com/blog/3038-eventemitter-is-an-rxjs-observable-stream-in-angular-2-beta-6.htm#comments_47949

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