Angular 2如何使用observable檢測字符串更改

Question

我有2項服務。 在一個我想訂閱檢測其他服務中的字符串是否發生更改，以便每次更改時從數據庫加載。

第一項服務:(使用的會話值是對第二項服務的引用）

subscribeStringChange() {
    this.session.uid.subscribe(x => {
        console.log(this.session.uid);
        return this.af.database.list('items', {
            query: {
                orderByChild: 'uid',
                equalTo: this.session.uid
            }
        });
    });
}

這是第二項服務和我嘗試過的內容：

uid: Observable<string> = Observable.of('');

constructor(private auth: FirebaseAuth, private af: AngularFire) {
    this.auth.subscribe(user => {
        if (user) {
           this.uid = Observable.of(user.uid);
            console.info('logged in');
        } else {
             this.uid = Observable.of('');
            console.info('logged out');
        }
    });
}

Answer 1

您可以使用BehaviorSubject ，它既像生產者又消費者（或更確切地說，觀察者和觀察者）。 在你使用firebase的一方，你將在生產者一方行動，發出新的價值，另一方面，你只是保持相同

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

private _uid = new BehaviorSubject<string>('');

uid = this._uid.asObservable();

constructor(private auth: FirebaseAuth, private af: AngularFire) {
    this.auth.subscribe(user => {
        if (user) {
           this._uid.next(user.uid);
            console.info('logged in');
        } else {
             this.uid.next('');
            console.info('logged out');
        }
    });
}

注意this._uid.next('') 。 在這里，您發出一個新值，訂閱者將收到它。

您無需更改其他服務中的任何內容。 實際上，你做到了。 您正在嘗試訪問uid ，這是一個可觀察的，當您應該只使用傳遞給訂閱回調的值， x

this.session.uid.subscribe(x => {
    console.log(x);
    return this.af.database.list('items', {
        query: {
            orderByChild: 'uid',
            equalTo: x
        }
    });
});

Answer 2

你已經使事情變得更復雜了（：通常，你應該使用subscribe()將可觀察鏈的最終結果分配給變量（例如，在模板中使用）。你不應該在訂閱中處理observables ...

這是您可以使用的一種解決方案：

subscribeStringChange() {
  // when user is authenticated
  this.af.auth.filter(Boolean)
    // get her 'uid'
    .map(user => user.uid)
    // and use it in another observable
    .switchMap(uid => this.af.database.list('items', {
            query: {
                orderByChild: 'uid',
                equalTo: uid
            }
        })
    // finally, do something with the results
    .subscribe(snap => console.log(snap));
}

確保在代碼中的某處導入運算符，在這種情況下：

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';