Angular 2 Component nghe thay đổi trong dịch vụ

Question

Tôi có một câu hỏi đơn giản về phát hiện thay đổi.

Tôi có một thành phần và một dịch vụ (toàn cục) có bên trong boolean. Làm thế nào tôi có thể làm cho thành phần nghe được boolean đó và thực hiện một hàm nếu boolean đó thay đổi?

Cảm ơn!

Answer 1

Tùy thuộc vào cách thay đổi boolean bạn có thể hiển thị nó dưới dạng Observable<boolean> trên dịch vụ của bạn và sau đó đăng ký luồng đó trong thành phần của bạn. dịch vụ của bạn sẽ giống như thế:

@Injectable() 
export class MyBooleanService { 
    myBool$: Observable<boolean>; 

    private boolSubject: Subject<boolean>; 

    constructor() { 
     this.boolSubject = new Subject<boolean>(); 
     this.myBool$ = this.boolSubject.asObservable(); 
    } 

    ...some code that emits new values using this.boolSubject... 
} 

Sau đó, trong thành phần của bạn, bạn sẽ có một cái gì đó như thế này:

@Component({...}) 
export class MyComponent { 
    currentBool: boolean; 

    constructor(service: MyBooleanService) { 
     service.myBool$.subscribe((newBool: boolean) => { this.currentBool = newBool; }); 
    } 
} 

Bây giờ tùy thuộc vào những gì bạn cần làm với giá trị bool bạn có thể cần phải làm một số những thứ khác để có được thành phần của bạn để cập nhật, nhưng đây là ý chính của việc sử dụng một quan sát được.

Một tùy chọn khác là bạn sử dụng ống không đồng bộ trong mẫu của bạn thay vì đăng ký rõ ràng luồng trong hàm tạo. Một lần nữa, điều đó phụ thuộc vào chính xác những gì bạn cần làm với các giá trị bool.

Answer 2

Câu trả lời của Sam hoàn toàn đúng. Tôi chỉ muốn thêm rằng bạn cũng có thể tận dụng trình thiết lập TypeScript để tự động kích hoạt sự kiện cho các thay đổi:

@Injectable() 
export class MyBooleanService { 
    myBool$: Observable<boolean>; 

    private boolSubject: Subject<boolean>; 

    constructor() { 
     this.boolSubject = new Subject<boolean>(); 
     this.myBool$ = this.boolSubject.asObservable(); 
    } 

    set myBool(newValue) { 
     this._myBool = newValue; 
     this.boolSubject.next(newValue); 
    } 
}