Khi nào sử dụng Observable vs EventEmitter vs Dot Rule để phát hiện thay đổi trong angular2

Question

Có ba phương pháp mà tôi đã thấy để quản lý phát hiện thay đổi trong Angular2.

1. quan sát

   @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. Dot Rule

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

Câu hỏi của tôi là, tất cả ba triển khai có thể làm việc khi đăng ký để xem những thay đổi trong dữ liệu. Làm thế nào để bạn quyết định khi nào nên sử dụng cái này thay vì cái kia, và những hạn chế của mỗi cái là gì.

Answer 1

Hãy cố gắng cung cấp cho bạn một số gợi ý ...

Vấn đề chính với cách tiếp cận cuối cùng là nó không hoạt động với các kiểu nguyên thủy mà chỉ với tham chiếu. Vì vậy, tôi sẽ không khuyên bạn nên ...

Tôi nghĩ rằng EventEmitter/Observable là phương pháp phù hợp để triển khai và xử lý các sự kiện tùy chỉnh. Nó cũng được liên kết với các thành phần (@Ouput), ánh xạ hai chiều trong các mẫu (cú pháp [(...)]) và đường ống async.

Từ tài liệu, EventEmitter sử dụng Observable nhưng cung cấp bộ điều hợp để nó hoạt động như được chỉ định tại đây: https://github.com/jhusain/observable-spec. Sau khi nhìn vào lớp EventEmitter của Angular2, nó mở rộng lớp Subject. Nó đơn giản hơn một chút so với đơn giản Observable. Xem liên kết này để biết thêm chi tiết: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md

Về việc tạo một tùy chỉnh có thể quan sát được, tôi sẽ nói: tạo các quan sát của riêng bạn chỉ khi bạn cần một cái gì đó cụ thể. Nếu không, hãy sử dụng lớp EventEmitter. Nhưng có rất nhiều thứ bạn có thể làm với lớp học EventEmitter và các toán tử quan sát được.

Để kết luận, trong trường hợp sử dụng "đơn giản" như vậy, mọi thứ không rõ ràng nhưng trên các tình huống phức tạp hơn, EventEmitter/Observable cho phép xác định chuỗi xử lý bằng cách sử dụng toán tử. Các mẫu cổ điển là để cập nhật danh sách theo giá trị cho một input (ở đây this.term định nghĩa trong ngModel của trường):

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

bài này blog tuyệt vời từ Christoph Burgdorf có thể cung cấp cho bạn một số ý tưởng về những gì quan sát có thể xử lý: http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html.

Hy vọng điều đó sẽ giúp bạn, Thierry