重新加载页面后保持元素位置-拖放cdk Angular 7

Question

我正在使用cdk拖动

现在，这就是我所拥有的：

馅饼的家长

<div class="pie-content">
  <div class="individual-pie"  *ngFor="let pie of serials">
    <app-pie [serialnumber]="pie"></app-pie>
  </div>
</div>

Pie.html

<div
  cdkDragBoundary=".content"
  cdkDrag
  (cdkDragEnded)="dragEnd($event)"
  class="pie"
  [chart]="pie"
></div>

馅饼ts

dragEnd(event: CdkDragEnd) {
  console.log(event);
}

Answer 1

您可以将列表保存到本地存储。以下是您在页面上使用它的方式：

[chart]="pie"

在控制器中：@Input pie:string[]；

因此，每次拖放时，请保存列表：

dragEnd(event: CdkDragEnd) {
  console.log(event);
  let myStorage = window.localStorage;
  myStorage.setItem("pie", pie);
}

并在刷新时从本地存储获取列表：

ngOnInit() {
    let myStorage = window.localStorage;
    this.pie= myStorage.getItem("pie"));
  }