我正在创建一个翻转面板。该面板分为三个部分。
工具栏上有一个固定部件,即翻转按钮。
在我的flip-panel.component中,我有一个用于工具栏的ng模板,因为工具栏应显示在两侧并且应该相同。但是我也在此模板中使用ng-content来获取用户定义的工具栏项。
我的flip-panel.component:
<div class="flip-panel">
<div class="front-container">
<ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
<ng-content select="panel-front"></ng-content>
</div>
<div class="back-container">
<ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
<ng-content select="panel-back"></ng-content>
</div>
</div>
<!-- template used in both container front and back -->
<ng-template #headerTemplate>
<div class="flip-panel-header">
<span>
<ng-content select="panel-tool-bar"></ng-content>
</span>
<span class="flip-button" aria-hidden="true" (click)="toggle()">[Flip]</span>
</div>
</ng-template>
我遇到的问题是,工具栏中的用户定义项(从面板工具栏中选择的内容)仅显示在背面内容上。
这里是一个完整的例子: https://stackblitz.com/edit/angular-fsnww2?file=src%2Fapp%2Fapp.component.html
答案 0 :(得分:2)
您只能使用一次内容投影,并且尝试通过ng-content加载标头。例如,确保使用* ngIf,内容仅投影一次。
示例代码:
<div class="flip-panel">
<div class="front-container">
<ng-container *ngIf="flipped" [ngTemplateOutlet]="headerTemplate"></ng-container>
<ng-content select="panel-front"></ng-content>
</div>
<div class="back-container">
<ng-container *ngIf="!flipped" [ngTemplateOutlet]="headerTemplate"></ng-container>
<ng-content select="panel-back"></ng-content>
</div>
</div>