angular - 嵌入包含更多内容的内容以嵌入到子组件中

Question

我有一个包装器组件，它用标题包装它的内容。
我使用 2 个不同的ng-content组件和 2 个不同的选择器，以便将一些内容转入边框区域，并将一些内容转入标题行（操作等）。

wrapper.component.html代码看起来像这样：

<div class="wrapper">
    <ng-content select=".header"></ng-content>
    <ng-content select=".body"></ng-content>
</div>

我有一个parent使用包装器的组件（我们称之为它），它托管另一个组件（我们称之为它child），我还想将内容转入包装器的标题行。

parent.component.html代码看起来像这样：

<div class="parent">
    <wrapper>
        <div class="header">    
            <a href="#">Action 1</a>
            <a href="#">Action 2</a>
            <a href="#">Action 3</a>
        </div>
        <div class="body">
            Some content
            <child></child>
        </div>
    </wrapper>
</div>

最后，child.component.html看起来像这样：

<div class="child header">
    <a href="#">Action 4</a>
</div>

这不起作用，这意味着动作 4 的锚元素不包含在标题区域中，而是留在子元素的节点内。
我尝试使用该ngProjectAs属性，但无济于事。

有没有办法在不求助于动态组件（例如 ng-template 等）的情况下实现这一点？

标签： angularnestedtransclusionng-content