angular - 更改 Angular 中每个框位置的最佳方法是什么

Question

我有两个盒子(盒子1-盒子2)，点击按钮后想改变每个盒子的位置

[每个盒子都是一个组件]

点击后

Answer 1

使用css flex系统

此解决方案不需要使用 ngFor。您可以将它应用于容器中的任何静态 block 。

html

<div class="flex-column" [class.reversed]="reversed">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
</div>

<button (click)="reversed = !reversed">Change order</button>

CSS

.flex-column {
  display: flex;
  flex-direction: column;
}

.reversed {
  flex-direction: column-reverse;
}

就地使用 Angular ngFor 指令和反向数组

<div *ngFor="let box of boxes" class="box box-{{box}}">Box {{ box }}</div>

<button (click)="boxes.reverse()">Change order</button>

Ng-run Example