Блог

Главная - Вопросы по программированию - ng-содержимое внутри ng-шаблона отображается только в одном ng-контейнере

ng-содержимое внутри ng-шаблона отображается только в одном ng-контейнере

#angular #ng-template #ng-container #ng-content

#angular #ng-шаблон #ng-контейнер #ng-содержимое

Вопрос:

Я создаю откидную панель. Панель состоит из трех частей.

  • панель-панельинструментов
  • панель-передняя
  • панель-назад

На панели инструментов есть исправленная часть, кнопка переключения.

В моем flip-panel.component у меня есть ng-шаблон для панели инструментов, потому что панель инструментов должна отображаться с обеих сторон и должна быть одинаковой. Но я также использую ng-content в этом шаблоне для извлечения пользовательских элементов для панели инструментов.

Моя флип-панель.компонент:

 <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/app/app.component.html

Ответ №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>