Angular Observable

Question

如何通過方法getUserInfo（）更改服務中的Observable中的值？

@Injectable() 
export class UserInfoService { 

    public User: UserInfo = { 
     firstName: "O", 
     lastName: "K", 
     email: "ol@op.com", 
     country: "uk", 
     avatarUrl: null, 
     receiveNotifications: true 
    } 
    private Obser: Observable<UserInfo> = new Observable(observer => { 
     observer.next(this.User); 

    }); 
    getUserInfo(): Observable<UserInfo> { 
     return this.Obser; 
    } 
} 

使用服務：

openDialog() { 
    let subscription = this.UserService.getUserInfo().subscribe(data =>(data=this.data)); 
    //What should I write here to change the value inside the observable? Please write if it is not difficult 
} 

Answer 1

您不能更改已發出的數據。您可以再次發射數據。

我認爲你需要像這樣（我沒有測試，只是一個想法）：

import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class MyService { 
    userData$: Observable <any> ; 

    constructor() { 
     this.userData$ = new BehaviorSubject(); 
    } 

    getUserInfoObservable() { 
     return this.userData.asObservable(); 
    } 

    updateUserInfo(newData) { 
     this.userData.next(newData); 
    } 
} 

這裏是你如何使用這樣的：當你想

@Component(...) 
class MyComponent { 
    myData: any; 
    constructor(private myService: MyService) { 
     myService.getUserInfoObservable().subscribe((newData) => this.myData = newData; 
    } 
} 

更新數據將使用myService.updateUserInfo(newData)。

您需要BehaviourSubject，因爲您當然想要立即獲取當前用戶數據。如果你的組件是懶加載的呢？您想要獲得目前的數據及其中的所有新數據。

您還可以將BehaviorSubject的初始值設置爲new BehaviorSubject(null)。空值是那裏的初始值。

BehaviorSubject是美麗的rxjs lib的一部分。完整的文檔可用，例如，here。

Answer 2

一旦與next()發射，該值不能被改變。根據反應式編程的概念，最好再次調用next()以更改值。

Answer 3

Observable顧名思義就是一個對象，可以對新數據事件進行「觀察」，換句話說就是「訂閱」發送新數據的事件。發射數據的不是Observable，而是使用next函數觀察新數據併發射它的observer。

Observable - 可訂閱獲取新數據的對象。 觀察者 - 發佈新數據的對象。

let observable: Observable<string> = new Observable(observer => { 
    observer.next('Hello'); // the observer emit the data 
}); 

observable.subscribe((data) => { // You subscribe to the observable for new data 
    console.log(data); // Print 'Hello' 
}); 

如果你希望能夠到新的數據發射到所有誰訂閱此觀察到，你需要使用它的觀察者的用戶：

如果使用可觀察到的，以確保

let observer; 
let observable: Observable<string> = new Observable(o => { 
    observer = o; 
    observer.next('Hello'); // the observer emit the data 
}); 

observable.subscribe((data) => { // You subscribe to the observable for new data 
    console.log(data); // Print 'Hello World! 
}); 

observer.next('World!'); 

公告所有組件都會在用戶信息更新時更新，我會將更新方法添加到允許發佈新值的服務中。

@Injectable() 
export class UserInfoService { 

    public user: UserInfo = { 
     firstName: "O", 
     lastName: "K", 
     email: "ol@op.com", 
     country: "uk", 
     avatarUrl: null, 
     receiveNotifications: true 
    } 
    private observer; 
    private observable: Observable<UserInfo>; 

    constructor() { 
     this.observable = new Observable(o => { 
      this.observer = o; 
      this.observer.next(user); 
     }); 
    } 

    getUserInfo(): Observable<UserInfo> { 
     return this.observable; 
    } 

    updateUserInfo(user: UserInfo) { 
     this.user = user; 
     this.observer.next(this.user); 
    } 
} 

現在，在對話框組件，您可以使用getUserInfo功能從服務來獲得可觀察到的，你可以訂閱，以獲取用戶信息。並使用updateUserInfo來更新它。