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() 时它会填充参数。然后我想在发出所有http请求后log这个汽车对象，这意味着Exterior和Engine的getContents都已经完成，这意味着Car的getContents已经完成，最后是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() 方法都应该返回一个你想要使用的数据的 Observable