ng容器印刷的外部容器

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