Служба в родительском компоненте запускается после дочернего компонента

Question

У меня есть родительский компонент, который запускает службу в функции ngInit. тогда я использую данные, полученные от сервиса на дочернем компоненте. Но кажется, что дочерний компонент запускается первым, а после этого родительский компонент получает данные от службы. Как я могу сначала получить данные от службы?

Родительский компонент:

export class ReportComponent implements OnInit {

    public report: Report = new Report();

    constructor(private reportService: ReportService) {}

    ngOnInit() {
        //get report detail data from API ............
        this.reportService.getReport('1')
      .subscribe(
        (data: any) => {
            this.report.serialNum_used_probe = data.serialNum_used_probe;
            this.report.created_datetime = data.created_datetime;
        }
      );

}

Answer 1

Я сделал эти шаги:

1) создайте класс ReportResolver:

@Injectable()
export class ReportResolver implements Resolve<any>{

  constructor(private reportService: ReportService){}

  resolve(route: ActivatedRouteSnapshot, rstate: RouterStateSnapshot):   Observable<any>{
    return this.reportService.getReport(route.paramMap.get('pk'));
  }
}

2) Добавить этот класс в список маршрутов:

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'report/:pk', component: ReportComponent, resolve: {reportData: ReportResolver} }
];

3) Вызов функции http в главном компоненте:

export class ReportComponent implements OnInit {

    public report: Report;
    constructor(private route: ActivatedRoute,
                private reportService: ReportService) {
    }

    ngOnInit() {

        this.route.data.map(data => data.reportData).subscribe(
          (data: any) => {
             this.report = new Report();
             this.report.serialNum_used_probe = data.serialNum_used_probe;
             this.report.created_datetime = data.created_datetime;
       });

  }
}

и это сработало для меня.

Answer 2

Я предполагаю, что вы использовали что-то вроде * ngIf или @Input в дочерних компонентах для передачи данных из родительского.

Не рекомендуется инициализировать переменные и создать экземпляр после запроса API:

export class ReportComponent implements OnInit {

    public report: Report;

    constructor(private reportService: ReportService) { }

    ngOnInit() {
        //get report detail data from API ............
        this.reportService.getReport('1')
            .subscribe(
                (data: any) => {
                    this.report = new Report();
                    this.report.serialNum_used_probe = data.serialNum_used_probe;
                    this.report.created_datetime = data.created_datetime;
                }
            );
    }
}