不使用包含元素的內容投影/包含

Question

我試圖跨多個<ng-content>插槽組件（<parent>）中的某些內容進行跨屏轉換，但不對子使用包含元素。

我需要這樣做，因爲父級中的佈局使用了flexbox，而且我特別想在這種特殊用例中充分利用flexbox的強大功能。不幸的是，對於flexbox，它對直接的孩子起作用，所以包含的元素會導致問題。

這是我的僞父模板。它使用啓用了flexbox的Bootstrap 4。

<div class="row"> 
    <div class="col-xs"> 
     Heading 
     <ng-content select="[anotherSlot]"></ng-content> 
    </div> 
    <ng-content select="[child]"></ng-content> 
</div> 

那麼這是我在做什麼，當我使用的組件。爲了簡單起見，我沒有顯示[anotherSlot]正在使用，但它是一個要求。

我曾嘗試@Directive方法，使用

<parent> 
    <div child> 
     <div class="col-xs-2">Small section</div> 
     <div class="col-xs">This should fill the available space</div> 
    </div> 
</parent> 

但後來我transcluded內容被包裹在一個<div child>，這樣打破了Flexbox的佈局。

它呈現這樣的：

<div class="row"> 
    <div class="col-xs"> 
     Heading 
    </div> 
    <div> <!-- This div is the problem --> 
     <div class="col-xs-2">Small section</div> 
     <div class="col-xs">This should fill the available space</div> 
    </div> 
</div> 

我也嘗試了@Component方法：

<parent> 
    <child> 
     <div class="col-xs-2">Small section</div> 
     <div class="col-xs">This should fill the available space</div> 
    </child> 
</parent> 

但是導致這樣的：

<div class="row"> 
    <div class="col-xs"> 
     Heading 
    </div> 
    <child> <!-- This is still a problem --> 
     <div class="col-xs-2">Small section</div> 
     <div class="col-xs">This should fill the available space</div> 
    </child> 
</div> 

我怎麼能做到這一點？第一個<div>是靜態的，但其他將根據使用情況而有所不同。

<div class="row"> 
    <div class="col-xs"> 
     Heading 
    </div> 
    <div class="col-xs-2"> 
     Small section 
    </div> 
    <div class="col-xs"> 
     This should fill the available space 
    </div> 
</div> 

能以某種方式使用<template>嗎？

Answer 1

好吧，算了一下。原來<ng-content>可以處理多個項目。

因此，使用@Directive的方法，我可以這樣做：

<parent> 
    <div class="col-xs-2" child>Small section</div> 
    <div class="col-xs" child>This should fill the available space</div> 
</parent> 

而且它會導致這樣的：

<div class="row"> 
    <div class="col-xs"> 
     Heading 
    </div> 
    <div class="col-xs-2"> 
     Small section 
    </div> 
    <div class="col-xs"> 
     This should fill the available space 
    </div> 
</div> 

明顯的是真的！