使用 Subject (angularfire2) 查询对象答案

【问题标题】：Query object with Subject (angularfire2)使用 Subject (angularfire2) 查询对象
【发布时间】：2017-08-22 11:29:38
【问题描述】：

我想知道是否有可能有一个服务提供和firebase对象，哪个url绑定到一个主题，这是我目前的设置：

Homie.Service

@Injectable()
export class HomieService {
  homies: FirebaseListObservable<Homie[]>;
  homie: FirebaseObjectObservable<Homie>;
  public subject: BehaviorSubject<any>;
  constructor(db: AngularFireDatabase) {
    this.subject = new BehaviorSubject('');
    this.homies = db.list('/homies');
    this.homie = db.object('/homies/' + this.subject.value);
  }
}

这是“提供”一个对象的服务，该对象的 URL 绑定到一个主题。

现在我有一个组件可以做到这一点：

Homie-list.component

  selectHomie(selected: any) {
    this.homieService.subject.next(selected);
    this.router.navigateByUrl('/dashboard/homies/list/detail');
  }

其中“selected”是我要检索的对象的键

还有另一个组件（由于路由器而加载的组件）具有此代码：

Homie-detail.component

export class HomieDetailComponent implements OnInit {
  homie: any;
  constructor(private homieService: HomieService, private serviceService: ServiceService, private router: Router) {
    this.homieService = homieService;
  }
  ngOnInit() {
    this.homie = this.homieService.homie;
  }
}

现在什么都没有发生，this.homie 只是一个空对象。

我尝试了很多变体，例如：

在 Home-detail.component 中添加对 this.homie 的订阅：

  this.homieService.homie.subscribe(res => {
      this.homie = res;
    });

（这没有任何作用）

在服务上使用 Subject 或 BehaviorSubject（不带 .value）：

  public subject: Subject<any>;
  constructor(db: AngularFireDatabase) {
    this.subject = new Subject('');
    this.homie = db.object('/homies/' + this.subject);
  }
}

或

this.homie = db.object('/homies/' + this.subject);

但是这两个，因为主体是客体是行不通的。

【问题讨论】：

标签： angular angularfire2

【解决方案1】：

Subject 不保留当前值，它只是将新值传递给订阅者。

根据您的问题，您可以在这里使用BehaviorSubject，它保留当前值，还提供了一个方法getValue()，您可以使用该方法从中获取当前值，请参阅docs。

public subject: BehaviorSubject<any>;
constructor(db: AngularFireDatabase) {
  this.subject = new BehaviorSubject('');
  this.homie = db.object('/homies/' + this.subject.getValue());  // get current value from BehaviorSubject
}

这里有一个Plunder demo来演示。

【讨论】：