Angular

Question

我正在编写一个自定义组件，我需要在将一些文本粘贴到输入中时更新模型。我以为我可以使用 Renderer2 的 setValue 函数来做到这一点，但它似乎并没有像我期望的那样工作。

我一直在尝试寻找类似的问题，但令人惊讶的是似乎还没有其他人偶然发现这个问题..

如何将模型与粘贴的文本同步？

模板：

<input #input [(ngModel)]="model" (paste)="onPaste($event)">

组件：

@ViewChild('input') input: ElementRef;

constructor(private renderer2: Renderer2) {}

onPaste(event: any): void {

  this.renderer2.setValue(this.input, event.clipboardData.getData('text/plain'));

  // Is not set with the new data
  console.log(this.model);
}

Answer 1

显然，(paste) 事件在 (input) 事件之前触发，这导致粘贴事件触发时模型不更新。这就是为什么它是 "not synced"，我不得不在粘贴回调中使用 setTimeout() 以使其等待模型更新。之后我就可以像往常一样访问模型了。

你也可以这样做：

https://plnkr.co/edit/NFOwVzO5M5XzbwzHsVjA?p=preview

感谢@Ghetolay 的解决方案。

Angular - 将粘贴的文本与模型同步

Angular - Sync pasted text with model

html

paste

typescript