Angular Observables, подписка на несколько HTTP-запросов, без цепочки - PullRequest
Новая
       33

Angular Observables, подписка на несколько HTTP-запросов, без цепочки

0 голосов
/ 30 ноября 2018

Я ищу некоторую помощь относительно Observables с Angular. 

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 сделаны, что означает, что оба getContents из Exterior и Engine были выполнены, что будет означать, что getContents из Car было выполненои наконец ngOnInit.Я не хочу связывать эти http-запросы, имея в виду только вызов второго http-запроса после завершения первого.Оба должны выходить одновременно.

Есть идеи, как это реализовать?

1 Ответ

0 голосов
/ 30 ноября 2018

Используя RxJ, вы должны попробовать что-то вроде этого: 

    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() должны оба возвращатьНаблюдаемые данные, которые вы хотите использовать

...