ng-template內部的ng-content僅出現在一個ng容器中

Question

我正在創建一個翻轉面板。 面板分為三個部分。

• 面板工具條
• 面板前
• 面板背

工具欄上有一個固定部件，即翻轉按鈕。

在我的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

Answer 1

您只能使用一次內容投影，並且嘗試通過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>