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

Question

我正在使用 Angular 7 中的 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>

Pie.ts

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

Answer 1

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

[chart]="pie"

在你的 Controller 中: @输入 馅饼:字符串[];

所以每次拖放时，保存列表:

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

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

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