不使用包含元素的内容投影/嵌入

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 方法，使用[child]

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

但是我的嵌入内容被包裹在 <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>

真的很明显！