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

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 解决这个问题！这是第二次堆栈闪电战......

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-template #template> 中，该ng-content 没有选择器。

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