Angular ждать данных, прежде чем продолжить работу

Question

Вот мой код:

App-component.html

<router-outlet (activate)="onActivate($event)"></router-outlet>

App-component.ts

node;
ngOnInit() {
  this.loadData();
}
loadData() {
  return service.getData().subscribe(res => this.node = res)
}
onActivate(event) {
  // wait node get data then continue this function

}

2 функции выполняются одновременно, так есть ли способ подождать, пока узел получит данные из loadData (), а затем продолжить функцию onActivate?

Answer 1

Вы можете изменить код, чтобы сделать HTTP-запрос внутри метода onActivate(event). Попробуйте следующее

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Subject, Observable, Subscription } from 'rxjs';

export class AppComponent implements OnInit, OnDestroy {
  node: any;
  subscription: Subscription;

  ngOnInit() {
    // don't trigger the HTTP call here
  }

  loadData(): Observable<boolean> {
    const result = new Subject<boolean>();

    this.service.getData().subscribe(
      res => {
        this.node = res;
        result.next(true);
      },
      error => { 
        // handle error
        result.next(false);
      } 
    );

    return result;
  }

  onActivate(event) {
    // wait node get data then continue this function
    this.subscription = this.loadData().subscribe(
      status => {
        if (status) {
          // proceed further
        }
      }
    );
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}