如何从 Angular 中的输入标签创建撤消和重做值功能？

Question

我想创建一个功能，可以从 angular 中的输入标签撤消和重做值。如果我输入 Hello 我应该做的如下：

单击撤消按钮：显示地狱
单击撤消按钮：显示hel
单击重做按钮：显示地狱
单击重做按钮：显示你好

请帮忙。谢谢

Answer 1

输入中系统已经存在该功能。你可以试试控制z键和控制y键。

如果你想创建自己的，那么你必须添加用户输入字段和值的映射，并监听撤消和重做事件，并基于此通过在数组中上下移动来执行撤消和重做

Answer 2

你可以在你的 .ts 中做：

  inputValue: string = '';
  inputStates: string[] = [];
  undoStats: number = 0;

  onChanges(change) {
    this.inputStates.push(change);
    this.undoStats = 0;
  }

  undo() {
    this.undoStats++;
    this.inputValue = this.inputStates[this.inputStates.length - (this.undoStats + 1)];
  }

  redo() {
    if (this.undoStats > 0) this.undoStats--;
    if (this.undoStats >= 0)
      this.inputValue = this.inputStates[this.inputStates.length - (this.undoStats + 1)];
  }

在html中：

<div>
  <input
    type="text"
    [(ngModel)]="inputValue"
    (ngModelChange)="onChanges($event)"
  />
  <br />
  <button (click)="undo()">Undo</button><button (click)="redo()">Redo</button>
</div>

您只需要找到一个可以清除 this.inputStates 的点（例如 onSubmit 或类似的东西）。

如何从 Angular 中的输入标签创建撤消和重做值功能？

How to create Undo and Redo value functionality from input tag in Angular?

javascript

arrays

logic

angular