角度中的多槽内容投影不适用于组件

Question

我正在尝试创建一个组件，该组件接受一些div，并根据要项目的内容中定义的类将它们按特定顺序放置。为此，我创建了一个组件，其中包含一些带有类选择器的ng-content元素。如果我传递一些静态HTML，它确实有效，但是，如果我传递一个组件，它不会显示任何内容(除非我使用一个插槽(。我在StackBlitz中创建了一个示例，可以在这里找到。

我使用相同的组件定义了三种不同的场景：

1. 通过静态HTML并将组件配置为使用多个插槽，一切都很好。

   <app-content-formatter>
   <div class="body">This is just a nonsense text</div>
   <div class="head">This is the head.... I guess</div>
   </app-content-formatter>
   

2. 传递另一个组件并将其配置为使用多个插槽，则不会渲染任何内容

   <app-content-formatter>
   <app-some-text></app-some-text>
   </app-content-formatter>
   

3. 传递另一个组件并将其配置为使用单个插槽，一切都正常(但是，元素并没有按要求显示(

   <app-content-formatter [multiSlot]="false">
   <app-some-text></app-some-text>
   </app-content-formatter>
   

我不确定为什么会发生这种情况，我很可能忘记了什么(几个月前我就开始使用angular(。StackBlitz中提供的示例是一个更复杂场景的抽象，需要替换大型应用程序中使用的组件，其想法是通过重用现有的类和结构来避免大量更改，这就是我想要使用内容投影的原因。

如果非要我猜测的话，我会说问题是选择器，它们可能会改变，因为它们在带有组件名称的标签中，这也可能是一个问题，因为我们需要显示将动态加载的不同控件(该部分没有包括在示例中，因为问题是内容投影(。

提前感谢大家的帮助！

Answer 1

您定义了一个类选择器，因此要投影的组件需要使用选择器的类。

<app-some-text class="head"></app-some-text>

但是，没有办法将组件的实际内容投影到不同的插槽中。您需要将其分离到不同的组件中，并使用适当的选择器对每个组件进行投影。

Answer 2

Jhon-为了扩展Monkey MKU答案，多槽投影在选择器匹配的地方插入内容-这意味着它独立于ngIf。

请参阅此处的StackBlitz示例。