ng-template 中的 ng-content 仅出现在一个 ng-container 中

Question

我正在创建翻盖面板。该面板由三个部分组成。

面板工具栏
前面板
后面板

工具栏有一个固定部分，翻转按钮。

在我的 flip-panel.component 中，我有一个用于工具栏的 ng 模板，因为工具栏应该显示在两侧并且应该相同。但是我也在这个模板中使用 ng-content 来获取工具栏的用户定义项。

我的翻转-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 在两者中加载 header。确保，例如使用 *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>

ng-template 中的 ng-content 仅出现在一个 ng-container 中

ng-content inside ng-template appears only in one ng-container

angular

ng-template

ng-container

ng-content