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';