超时或策略问题，用于解析 Angular 中的大型 XML 文件

Question

我是Angular的新手，并尝试解析Adobe IDML(XML(文件以在浏览器中显示它们。让我解释一下：

有以下XML结构("->"表示提供有关下一行的信息(：

IDML (designmap.xml) ->
Spread (spread_xy.xml) ->
Page ->
TextFrames ->
Story
Rectangle ->
Image

我已经编写了一个后端，将这些文件转换为JSON数组，并通过HTTP加载这些JSON数组。目前为止，一切都好。

以下是我在前端对应的 IDML 服务：

export class IdmlService {
apiUrl = environment.backendApi + 'idml/';
constructor(private http: HttpClient) { }
renderSpread(currentFolder, currentSpreadId): Observable<HttpResponse<any[]>> {
return this.http.get<MenuItem[]>(
this.apiUrl + currentFolder + '?spreadId=' + currentSpreadId, { observe: 'response' }).pipe(
retry(3)
);
}
}

我在我的出版物组件中调用"renderSpread"方法，如下所示：

renderPublication(currentFolder: String, currentSpreadId: String): void {
this.idmlService.renderSpread(currentFolder, currentSpreadId)
.subscribe(resp => {
this.currentSpreadJson = resp.body;
// console.log(this.currentSpreadJson);
});
}

并将"currentSpreadJson"绑定到模板中名为spreadComponent的子组件：

<div class="publication">
<app-spread [currentSpreadJson]="currentSpreadJson"></app-spread>
</div>

在 spreadComponent 中，我构造了我的 currentSpread，并通过 "currentElementsJson" 将 JSON 的必要其余部分绑定到下一个子元素组件，如下所示：

@Input() currentSpreadJson: any;
currentSpread: Spread;
currentElementsJson: any;
ngOnInit() {
setTimeout(() => { // THE MAIN PROBLEM
this.render();
}, 3000);
}
render(): void {
this.currentSpread = {
id: this.currentSpreadJson.idPkg_Spread.Spread['Self'],
[...some other vars...]
};
[...doing some stuff...]
this.currentElementsJson = this.currentSpreadJson.idPkg_Spread.Spread;
}

下面是模板：

<div id="{{currentSpread.id}}" class="spread box_shadow" [ngStyle]="{'width': currentSpread.width + 'px', 'height': currentSpread.height + 'px'}">
<app-page [currentSpreadJson]="currentSpreadJson"></app-page>
<app-element [currentElementsJson]="currentElementsJson"></app-element> // <-- here
</div>

所以我的问题：这样的IDML可能会变得非常巨大。这个策略在XML树中更深入，问题是我总是需要在Init上做一个超时。我尝试了一些其他的生命周期，如ngAfterViewInit等，但我认为上层策略不是我的项目所需要的。我听说过"异步等待"函数，但我真的不知道如何在这种情况下实现它，我不确定这是否是解决方案。如果有人能给我一个提示，那就太好了。谢谢。

问候，多米尼克

Answer 1

这对我现在有用。我改变了这个：

ngOnInit() {
setTimeout(() => { // THE MAIN PROBLEM
this.render();
}, 3000);
}

对此：

ngAfterContentChecked() {
this.render();
}

现在，嵌套组件会等到内容可用。

问候