Angular 7 - Загрузка родительского компонента После того, как все отдельные дочерние компоненты готовы с данными - PullRequest
0 голосов
/ 02 марта 2019

Меня немного смущает точный способ сформулировать этот вопрос, но я постараюсь объяснить это. У меня есть приложение на Angular 7. В нем есть домашний компонент, а внутри шаблона домашнего компонента у меня есть парадругих компонентов для визуализации.Ниже мой home.component.html

<div>
<comp-a></comp-b>
<comp-b></comp-b>
<comp-c></comp-c>
</div>

Где comp-a, comp-b и comp-c являются отдельными компонентами и зависят от внешних вызовов данных.Я заключил их в отдельные службы.Пример типа

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { compaVM } from "../models/compaVM";
import { Subject } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class CompAService {

compalist: compa[] = new Array();

private compaSubject = new Subject<compaVM[]>();

constructor(private httpClient: HttpClient) { }

compalistObservableListner() {
return this.compaSubject.asObservable();
}

getAllcompa(zoneId) {

this.httpClient.get<{ message: string, data: any }>('http://localhost:3000/api/xxxx/' + zoneId)
.subscribe((resp) => {
this.compalist = resp.data.map((complistdata) => {
return new compaVM(id, name)
});

this.compaSubject.next([...this.compalist]);
})
}
}

Аналогично у меня есть отдельные сервисы для comp-b и comp-c.Домашний component.ts просто имеет ngOnInit () без кода.В настоящее время я использую его в качестве родителя для этого дочерних компонентов для визуализации.В настоящее время, когда я запускаю приложение, визуализируется домашний компонент, но comp-a и comp-b не загружаются вместе.Они данные загружаются через некоторое время.Мой вопрос заключается в том, каким должен быть подход, или, скорее, как я могу заставить мой родительский компонент ждать, пока все мои дочерние компоненты не будут готовы, и я смогу показать их за один раз.Дочерние компоненты не имеют отдельных маршрутов.Они показаны в html домашнего компонента, поэтому у меня есть только один маршрут, определенный как

const routes: Routes = [
{
path: '', component: HomeComponent
}
];

Помощь оценена !!Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...