angular - 有条件地交换元素在一行中的位置

Question

我有一个组件在网格系统 simil-bootstrap 中显示一行。它就像左侧的图像和右侧的一些正文一样简单，两者都是从 CMS 中动态提取的。

我正在尝试添加一个先显示文本然后显示图像的条件，反之亦然。 似乎是要走的路，但我不知道怎么做ng-container。ng-template

我正在寻找类似的东西：

<ng-container *ngIf="content.switched; then Image and Text; else Text and Image"></ng-container>

<ng-template #Image> ... </ng-template>
<ng-template #Text> ... </ng-template>

谢谢！

标签： angular

Answer 1

它可以通过两个ng-container元素来完成，每个元素都显示一个带有ngTemplateOutlet指令的模板并使用条件表达式选择模板：

<ng-container *ngTemplateOutlet="content.switched ? Image : Text"></ng-container>
<ng-container *ngTemplateOutlet="content.switched ? Text : Image"></ng-container>

<ng-template #Image>...</ng-template>
<ng-template #Text>...</ng-template>

请参阅此 stackblitz以获取演示。