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>

谢谢！

Answer 1

我想最好的方法是使用CSS Flexbox（行与行反向）。如果您不能使用Flexbox，或者只是想使用Angular来使用，那么一种合适的方法可以使用指令或组件的ViewContainerRef以所需的顺序添加模板：

@Component({
    ...
})
public class AnyComponent implements OnInit {
    @ViewChild('Image')
    public imageTemplate: TemplateRef<any;>
    @ViewChild('Text') // grabs a reference to the <ng-template #Text>
    public textTemplate: TemplateRef<any;>

    constructor(private viewContainer: ViewContainerRef) {}

    public ngOnInit(): void {
       if(condition) {
          this.viewContainer.createEmbeddedView(this.textTemplate);
          this.viewContainer.createEmbeddedView(this.imageTemplate);
       } else {
          this.viewContainer.createEmbeddedView(this.imageTemplate);
          this.viewContainer.createEmbeddedView(this.textTemplate);
       }

    }
}

Answer 2

可以使用两个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>

有关演示，请参见this stackblitz。

有条件地交换元素位置

2 个答案: