在 Angular 10 中显示 ng-content 两次

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>

Answer 2

就我而言，我正在改造现有组件，并发现尝试根据视口选择不同输出并处理

ng-content

投影出最后一次出现的问题。

<div class="mobile">

    ...

    <ng-content></ng-content> <!-- content NOT rendered -->
</div>
<div class="desktop">

    ...

    <ng-content></ng-content> <!-- content rendered here -->
</div>

要修复，我将最后/第二次出现替换为：

<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>

并在其后面添加了代码：

@ContentChild(TemplateRef) contentTemplate: TemplateRef<any>;

同样，必须用

ng-template

将调用者中的内容包裹起来，例如：

<app-custom-thing class="some-class">
    <ng-template>
        Your content here!
    </ng-template>
</app-custom-thing>

这具有允许先前使用而不用

ng-template

进行包装的效果，以继续像以前一样工作，而未来需要

ng-template

的使用将按预期呈现。

好奇其他人是否有意见或替代方法来实施。谢谢！

Answer 3

您需要一个 .上课前点

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