Angular <ng-content> 在渲染数据时保持顺序

如何解决Angular <ng-content> 在渲染数据时保持顺序

我将首先展示我有哪些组件 -

main.component.html

<app-container>
  <app-rectangle [color]="'blue'" [width]="200" [height]="200"></app-rectangle>
  <app-circle [color]="'red'" [radius]="5"></app-circle>
  <app-text [text]="'Hello world'"></app-text>
</app-container>

然后我还有 4 个其他组件 -

container.component.html

<ng-content></ng-content>

Some other stuff,that is not relevant.

最后是 3 个指令，它们渲染矩形、圆形并创建文本 svg 元素。

我没有添加 component.ts 文件，但每个文件都有特定的逻辑，这又无关紧要，除非您另有想法 - 那么我可以更新问题。

那么现在让我们继续讨论这个问题 -

它不是先渲染矩形，然后是圆形，最后是文本，它会同时渲染所有内容，基本上渲染最快的先渲染，渲染时间最慢的最后渲染.

我使用 svg.js 库来动态呈现组件中的元素，而不是使用实际的 svg html 元素，这就是其背后的原因。

现在的实际问题 -

有没有什么办法可以让ng-content先渲染，渲染完再转到下一个？

此外，如果可能的话 - 这是一个好主意，还是我应该更改实际的元素创建方式并想出一种不同的方式来创建它们？

最后 - 是否有任何方法可以从实际组件（例如，app-rect）中找出它在 ng-content 中的位置？所以在这种情况下，我想找出它是什么位置，应该返回 3。