javascript - 在 Angular 10 中两次显示 ng-content

Question

我在自定义 Angular 组件中工作，我需要在其中显示投影内容两次。

假设我有这个 html:

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

因此，在 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-content 只是“粘贴”模板，无法复制。即使我像这样使用 ng-template:

<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 上也有这样的请求，但当时似乎没有人知道答案。

个人资料:ContentChild 也不会工作，因为它无法看穿投影内容(或我相信的东西)

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

Answer 1

我能提供的是传递一个模板而不是传递一段 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>

@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>