Question

我对解决这个问题的确切方法有些困惑，但是我会尽力解释它。我有一个Angular 7应用程序，因为我有一个home组件，并且在home组件模板中，我有几个其他要渲染的组件。下面是我的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提供了单独的服务。 Home component.ts仅具有ngOnInit（），没有代码。我目前正在使用它作为此子组件要呈现的父类。当前，当我启动应用程序时，home组件将呈现，但是comp-a和comp-b不会一起加载。他们会在一段时间后加载数据。我的问题是应该采用哪种方法，或者如何让父组件等待渲染，直到所有子组件都准备好并且可以一次性展示它们。子组件没有单独的路由。它们显示在home组件html上，因此我只有一条定义为

的路由

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

帮助赞赏！！谢谢

Angular 7-加载父组件所有单个子组件都准备好数据

0 个答案: