如何使用 Angular 一起使用 ng-content 和 ng-switch 投影内容？

Question

我创建了 2 个可自定义的 css 网格，我想在整个项目中使用它们。问题是当我使用新的 ngSwitchCase 时，我在使用 ng-content 投影的网格中的内容没有显示在我的第二个网格中。关于如何解决这个问题的任何想法？我很想收到反馈，我在下面做了一个 stackblitz...

https://stackblitz.com/edit/angular-ivy-qm6qmj?file=src/app/template/template.component.html

更新：我还使用 ngTemplateOutlet 创建了另一个 stackblitz，一切正常，除了我不确定如何将我的图像占位符文本放置在我的网格的左侧面板（或与此相关的任何内容）而不是它所在的位置当前位于网格的右侧面板中。这部分在我的第一个示例中与 ng-content select 完美配合，但我不确定如何使用 ngTemplateOutlet 解决这个问题！这是第二个 stackblitz...

https://stackblitz.com/edit/angular-ivy-3gh45b?file=src/app/template/template.component.html

总而言之，第一个 stackblitz 的内容完全符合我的要求，但我无法创建另一个 switchcase，因为 ng-content 在这种情况下似乎受到限制，而第二个 stackblitz 让我使用 ngswitch当我通过 grid1 或 grid2 更改时，所有数据都按我的预期显示，但布局不正确！我很想从两个 stackblitz 中获得两全其美的东西，其中内容完美地布局在我想要的地方，同时仍然使用 ngswitch！如果有人有解决方案，将不胜感激！！

Answer 1

你几乎在那里。您只需要在选择图像占位符的 <ng-template #content> 中添加一个 ng-content：

<ng-template #content>
  <ng-content select=".img"></ng-content>
</ng-template>

然后 .img 元素将被投影到该模板中，其余内容将被投影到只有 ng-content 且没有选择器的 <ng-template #template> 中。

Here's a fork of your second StackBlitz 我认为可以满足您的需求。