通过另一个ng-content传递内容儿童？

Question

我构建了一个看起来像这样的下拉组件

<my-drop-down>
    <my-drop-down-element>First</my-drop-down-element>
    <my-drop-down-element>Second</my-drop-down-element>
</my-drop-down>

为了完成这项工作，DropDown组件中有一个@ContentChildren(DropDownElementComponent)。到目前为止，这是完美的工作，但现在我有一个奇怪的要求：

我需要将下拉组件包装在另一个组件中，以处理其他一些东西。我试过的是：

wrapper.component.html：

<my-drop-down>
    <ng-content></ng-content>
</my-drop-down>

app.component.html

<my-wrapper>
    <my-drop-down-element>First</my-drop-down-element>
    <my-drop-down-element>Second</my-drop-down-element>
</my-wrapper>

但不幸的是，DropDownComponent中没有任何内容子项，如果我这样处理它。我也试过@ContentChildren(DropDownElementComponent, {descendants: true})

有没有办法通过上面的例子中的另一个ng-content传递内容孩子？

Answer 1

如果你想包装drop-down你可以这样做：

<wrapper>
  <drop-down>
     <drop-down-el>first</drop-down-el>
     <drop-down-el>second</drop-down-el>
  </drop-down>
</wrapper>

Demo