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

所以，我有這三個對象，而我想要的是當我調用new Car（）時，它會填充參數。 然后，我想在發出所有http請求之后log這個car對象，這意味着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
              });
          )
...

這也意味着您的engine.getContent() exterior.getContent()和engine.getContent()方法都應返回您要使用的數據的Observable