нг-контейнер напечатан вне контейнера - PullRequest
Новая
       21

нг-контейнер напечатан вне контейнера

0 голосов
/ 11 сентября 2018

Я создаю пользовательский модальный компонент (я хотел что-то простое), и я нашел такое поведение, которое не могу понять.

Это мой модальный компонент HTML 

<div class="modal-overlay">
  <div class="modal-main">
    <ng-content selector="header"></ng-content>
    <ng-content></ng-content>
    <ng-content selector="footer"></ng-content>
  </div>
</div>

Если я использую этот шаблон компонента, все будет работать нормально, позже я смогу использовать этот компонент следующим образом, и он будет работать, как указано. 

<app-modal>
  <header><h1>Hello modal!</h1></header>
  <div class="modal-content">This is a modal that will be printed nicely</div>
  <footer><button>Close</button></footer>
</app-modal>

Проблема возникает, когда я пытаюсь инкапсулировать один из ng-content внутридела.Если я сделаю 

<div class="modal-overlay">
  <div class="modal-main">
    <div class="is-flex">
      <ng-content selector="header"></ng-content>
      <i class="fas fa-times"></i>
    </div>
    <ng-content></ng-content>
    <ng-content selector="footer"></ng-content>
  </div>
</div>

Полученный HTML будет следующим: 

<div _ngcontent-c1="" class="modal-overlay">
  <div _ngcontent-c1="" class="modal-main">
    <div _ngcontent-c1="" class="is-flex">
      <i class="fas fa-times"></i>
    </div>
    <header><h1>Hello modal!</h1></header>
    <div class="modal-content">This is a modal that will be printed nicely</div> 
    <footer><button>Close</button></footer>
  </div>
</div>

Есть идеи, почему header не заканчивается внутри .is-flex div?Спасибо!

1 Ответ

0 голосов
/ 11 сентября 2018

нг-контент не «производит» контент, он просто проецирует существующий содержание. Думайте об этом как о некоторой вариации node.appendChild (el) или хорошо известная версия JQuery $ (node) .append (el): с этими методами узел не клонируется, он просто перемещается на новое место. Потому что Это жизненный цикл проецируемого контента связан с тем, где он находится объявлено, а не там, где оно отображается.

Использовать ng-template 

 <app-modal>
  <ng-template> <header><h1>Hello modal! 
  </h1></header></ng-template>
  <div class="modal-content">This is a modal that will be printed nicely</div>
  <footer><button>Close</button></footer>
</app-modal>

так как он получает шаблон. Он должен получить доступ к шаблону с помощью @ContentChild и использовать ngTemplateOutlet для его отображения 

     <div class="modal-overlay">
          <div class="modal-main">
            <div class="is-flex">
      <ng-container 
      [ngTemplateOutlet]="template"> 
      </ng-container>
       <i class="fas fa-times"> 
       </i>
       </div>
       <ng-content></ng-content>
       <ng-content selector="footer"> 
      </ng-content>
          </div>
        </div>

  @ContentChild(TemplateRef) template: TemplateRef

Для получения дополнительной информации: https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b

...