Angular 5：在组件内订购 html 标签

Question

我需要根据一些输入标志在我的组件中排序 html 元素，如下所示：

如果标志为真：

<i>...</i><span>...</span>

其他：

<span>...</span><i>...</i>

每个标签都有很多绑定，我认为这是错误的 - 只需创建 2 个具有不同顺序的模板。 那么，我怎样才能以有角度的方式实现呢？

此时我找到了这个解决方案：

<ng-container *ngIf="invert; then templateInvert else templateRegular"></ng-container>

<ng-template #templateLabel>
  ...
</ng-template>
<ng-template #templateCheckbox>
  ...
</ng-template>

<ng-template #templateRegular>
  <ng-container *ngTemplateOutlet="templateCheckbox"></ng-container>
  <ng-container *ngTemplateOutlet="templateLabel"></ng-container>
</ng-template>
<ng-template #templateInvert>
  <ng-container *ngTemplateOutlet="templateLabel"></ng-container>
  <ng-container *ngTemplateOutlet="templateCheckbox"></ng-container>
</ng-template>

现在，我想知道是否有一种方法可以更轻松地做同样的事情。

对不起，我的英语不好，谢谢你的提前。

Answer 1

做这样的事情：

<div *ngIf='yourFlag'></div>
<div *ngIf='!yourFlag'></div>

或像这样（默认 css 'display:none;'）：

<div [class.show]='yourFlag'></div>
<div [class.show]='!yourFlag'></div>