Angular Observables，订阅多个 http 请求，无链接

Question

我正在寻找关于 Angular 的 Observables 的帮助。

export class Car implements OnInit {
    exterior: Exterior;
    engine: Engine;

    ngOnInit(): void {
        this.getContent();
    }

    getContent() {
        this.exterior.getContent();
        this.engine.getContent();
    }
}

export class Exterior {
    color: string;
    doors: number;

    getContent() {
        this.http.get('url').map((response) => {
            this.color = response.color;
            this.doors = response.doors;
        });
    }
}

export class Engine {
    horsePower: number;
    model: string;

    getContent() {
        this.http.get('url').map((response) => {
            this.horsePower = response.horsePower;
            this.doors = response.doors;
        });
    }
}

const car = new Car();
console.log(car);

所以，我有这 3 个对象，我想要的是当我调用 new Car() 时它填充参数。然后我想 log 在发出所有 http 请求后这个汽车对象，这意味着 Exterior 和 Engine 的 getContents 都已经完成，这意味着 [= Car的13=]已经完成，最后是ngOnInit。我不希望链接这些 http 请求，这意味着只在第一个 http 请求完成后调用第二个 http 请求。两人应该同时出门。

关于如何实施它有什么想法吗？

Answer 1

使用 RxJs 你应该尝试这样的事情：

    export class Car implements OnInit {

        exterior: Exterior;
        engine: Engine;

        ngOnInit(): void {
            this.getContent();
        }

        getContent(): Observable<any> {

           return forkJoin(this.exterior.getContent(), this.engine.getContent());

          }
    }

其他组件内部：

...
this.car.getContent().subscribe(
              results => {
                 let exterior = result[0];
                 let engine = result[1];
                 // Do whatever you want here
              });
          )
...

这也意味着您的 exterior.getContent() 和 engine.getContent() 方法都应该 return 您要使用的数据的 Observable

Angular Observables，订阅多个 http 请求，无链接

Angular Observables, subscribing to multiple http requests, no chaining

angular

rxjs

httprequest

angular2-observables