Javascript 在角度10中显示ng内容两次

我在一个自定义的角度组件中工作，我需要显示两次投影内容

假设我有这个html：

<app-awesome>
    <app-awesome-card *ngFor="let card of cards">
        <h1>{{card.title}}</h1>
        <img [src]="card.thumbnail">
    </app-awesome-card>
</app-awesome>

{{card.title}

因此，在awesome card.component.html中，投影的内容将是一些我想投影两次的卡片组件

可能是这样的：

<div class="awesome-class">
    <ng-content select="app-awesome-card"></ng-content>
</div>
<div class="more-awesome-class">
    <ng-content select="app-awesome-card"></ng-content>
</div>

但这不起作用，因为ng内容只是“粘贴”模板，不能复制。即使我像这样使用ng模板：

<div class="awesome-class">
    <ng-container *ngTemplateOutlet="content"></ng-container>
</div>
<div class="more-awesome-class">
    <ng-container *ngTemplateOutlet="content"></ng-container>
</div>

<ng-template #content>
    <ng-content select="app-awesome-card"></ng-content>
</ng-template>

这也行不通

我花了一周的时间试图找到一个优雅的解决方案，但我没能。仅直接修改DOM，但这是一种糟糕的做法。 我看到过一些类似的老问题，甚至Github也要求这样做，但当时似乎没有人知道答案

PD: ContentChild也无法工作，因为它无法看穿投影内容（或我相信的内容）

编辑

---

如果我可以访问投影的内容信息，我可以手动渲染内容，但我尝试的一切都失败了

您需要一个。上课前打点

<ng-template #content>
    <ng-content select=".app-awesome-card"></ng-content>
</ng-template>

---

我能提供的是传递一个模板，而不是传递一段html

<app-awesome>
    <ng-template> // or your own helper structural directive can be used.
    <app-awesome-card *ngFor="let card of cards">
        <h1>{{card.title}}</h1>
        <img [src]="card.thumbnail">
    </app-awesome-card>
    </ng-template>
</app-awesome>

//也可以使用您自己的助手结构指令。
{{card.title}

@ContentChild（TemplateRef）contentTpl；
...

是的，我知道这一点，但这是一个Ionic项目，我希望代码更干净

@ContentChild(TemplateRef) contentTpl;
...
 
<div class="awesome-class">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
</div>
<div class="more-awesome-class">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
</div>