Question

我正在尝试使用多个<parent>广告位在组件（<ng-content>）内转换一些内容，而不使用子广告的包含元素。

我需要这样做，因为父内部的布局使用 flexbox ，我特别希望利用flexbox的强大功能来实现这个特定的用例。不幸的是，对于flexbox，它适用于直接子节点，因此包含元素会导致问题。

这是我的伪父模板。它正在使用Bootstrap 4并启用了flexbox。

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

这就是我在使用组件时正在做的事情。为简单起见，我没有显示[anotherSlot]正在使用中，但这是一项要求。

我使用[child]

尝试了@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>

然后我的被抄送的内容被包裹在<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>

真的很明显！

不使用包含元素的内容投影/转换

1 个答案: