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

Question

我是Angular的新用户，请尝试解析Adobe IDML（XML）文件以在浏览器中显示它们。让我解释一下：

有以下XML结构（“->”表示提供有关下一行的信息）：

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

我已经编写了一个后端，可以将这些文件转换为JSON-Array，然后通过HTTP加载这些JSON-Array。到目前为止一切顺利。

以下是前端中我对应的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)
      );
  }
}

我这样在我的publicationComponent中称为“ 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绑定到下一个子elementComponentComponent，如下所示：

@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-Tree中更深入，问题是我总是需要对init进行超时。我尝试了其他一些生命周期，例如ngAfterViewInit等，但是我认为高级策略并不是我的项目所需的东西。我听说过“异步等待”功能，但是我真的不知道如何在这种情况下实现该功能，我不确定这是否是解决方案。如果有人可以给我一个提示，那就太好了。谢谢。

问候，多米尼克

Answer 1

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

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

至此：

ngAfterContentChecked() {
      this.render();
  }

现在嵌套的组件将等到内容可用为止。

问候