Angular2 phát hiện thay đổi trong dịch vụ

Question

Tôi có một thành phần trong Angular2 đang thay đổi biến lớp "lang" trong dịch vụ translate.service.ts của tôi. Trong một thành phần khác tôi lấy một dict với bản dịch trên init. Nếu thành phần đầu tiên thay đổi ngôn ngữ dịch vụ sau này, tôi muốn tự động tìm nạp lại dict trong thành phần thứ hai. Làm thế nào để làm điều đó?

thành phần đầu tiên:

setLang(lang) { 
    this._translateService.setLang(lang); 
    } 

dịch vụ:

dict = { "en": {}}; 
lang = "en"; 

setLang(lang) { 
    this.lang = lang; 
} 

getLang() { 
    return this.dict; 
} 

Thứ hai thành phần:

ngOnInit() { 
    this.dict = this._translateService.getDict(); 
} 

Answer 1

Bạn nên sử dụng một EventEmitter trong dịch vụ:

export class LangService { 
    langUpdated:EventEmitter = new EventEmitter(); 

    setLang(lang) { 
    this.lang = lang; 
    this.langUpdated.emit(this.lang); 
    } 

    getLang() { 
    return this.dict; 
    } 
} 

Các thành phần có thể đăng ký sự kiện này để được thông báo khi thuộc tính lang được cập nhật.

export class MyComponent { 
    constructor(private _translateService:LangService) { 
    } 

    ngOnInit() { 
    this._translateService.langUpdated.subscribe(
     (lang) => { 
     this.dict = this._translateService.getDict(); 
     } 
    ); 
    } 
} 

Xem câu hỏi này để biết thêm chi tiết:

• Delegation: EventEmitter or Observable in Angular2
• Delegation: EventEmitter or Observable in Angular2

Sửa

Tiếp theo bình luận của Mark s, một 01./Observable nên được ưa thích:

EventEmitter chỉ nên được sử dụng cho phát tùy chỉnh Sự kiện trong thành phần, và rằng chúng ta nên sử dụng Rx cho các kịch bản có thể quan sát/sự kiện khác.