2

我正在使用自定义角度组件，我需要显示两次投影内容。

假设我有这个 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 对此提出的要求，但当时似乎没有人知道答案。

PD：ContentChild 也不会工作，因为它不能看透投影的内容（或者我相信的东西）

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

4

2 回答 2

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>
于 2021-02-06T19:07:05.560 回答
0

你需要一个 。课前点

<ng-template #content>
    <ng-content select=".app-awesome-card"></ng-content>
</ng-template>
于 2021-02-06T18:29:17.210 回答