ng-container 打印在容器外

Question

我正在构建一个自定义模态组件（我想要一些简单的东西），但我发现这种行为我无法理解。

这是我的模态组件 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 中时，问题就来了。 如果我这样做了

<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 内结束吗？ 谢谢！

Answer 1

ng-content 不会“产生”内容，它只是投射现有的内容 内容。将其视为 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