Question

我有一个很多模式，我不是最好的解决方法。

我订阅了一个observable（这里是路由器）给了我值。我需要其中一个值来构建另一个请求来获取另一个observable。但是我订阅了一个可观察的内容。

我知道这不是一个好的模式，但我不知道如何做到这一点。

如果我使用这个第二个observable来获取另一个值并在可观察的observable中获得另一个observable。

如何解决这个问题并避免喝汤？

这是我的代码：

deal.component.ts

import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {ActivatedRoute} from "@angular/router";
import {DealsService} from "../deals.service";

@Component({
  templateUrl: './+deal.component.html',
  styleUrls: ['./+deal.component.scss']
})
export class DealRouterComponent implements OnInit {

  deal$: Observable<any>;
  public dealId:string;
  private sub:any;

  constructor(
    private route: ActivatedRoute,
    private dealsService: DealsService) {}

  ngOnInit() {
    this.sub = this.route.params
      .subscribe(params => {
        this.dealId = params['id'];
        this.deal$ = this.dealsService.getDeal(this.dealId);
      })
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

deal.service.ts

import {Injectable, Inject} from "@angular/core";
import {Observable} from "rxjs/Observable";
import {AngularFireDatabase} from "angularfire2";

@Injectable()
export class DealsService {

  constructor(private db: AngularFireDatabase) {}

  getDeal(id) {
    return this.db.object('deals/' + id);
  }

 }

deal.component.html

{{deal | async | json}}

Answer 1

Observable可通过operators链接。这是可观察力量之一，我发现this tutorial是解释如何使用ReactiveX的最好之一。

你不应该像deal$那样更改observable。假设您的服务仅从ID返回一笔交易，那么您在每笔交易中构建Observable，而我假设您想要的是Observable，随着时间的推移会发出交易。此外，您还必须不断重新订阅新的deal$。上一个Subscription将继续收听旧deal$，并且永远不会获得新值。

export class DealRouterComponent implements OnInit {

  ngOnInit() {
    this.deal$ = this.route.params.flatMap(params => 
      this.dealsService.getDeal(this.dealId = params['id'])
    );  
  }
}

这样，每当路线的参数更新deal$时，您的服务都会发出新的优惠。

如何避免订阅汤？

1 个答案: