Angular 并且内容可编辑

Question

我在网上搜索过，但找不到处理 Angular 6/7 上的 contenteditable 事件的方法。 Angular 似乎有一个混乱的解决方案，但所述功能似乎没有延续到最新版本。

一个用例是在一个内容可编辑的onChange事件上，调用一个函数：

<div contententeditable="true" [change]="onNameChange(if.there.is.such.a.thing)">Type your name</div>

...

private name: string;

onNameChange(name) {
   this.name = name;
}

对此有什么想法吗？谢谢

Answer 1

您可以使用 input 事件，如下所示：

<div contenteditable (input)="onNameChange($event.target.innerHTML)">
   Type your name
</div>

Here is a Stackblitz demo

Answer 2

只需在元素和事件输入上设置一个变量，从 innerText 获取值

<h2 contenteditable="true" #x (input)="item.title = x.innerText">{{item.title}}</h2>

Angular 并且内容可编辑

Angular and contenteditable

events

contenteditable

angular