尝试使用 angular 中的可编辑 div 中的文本内容更新变量时，可编辑 div 出现奇怪的行为。有什么解释吗？

Question

我正在尝试创建一个文本编辑器，并使用可编辑的 div 在 angular 中创建了一个自定义元素。

在某些情况下，我将不得不为 div 的内容设置一些初始值，并在某些情况下捕获 div 中键入的数据。

但是根据设置的初始值，我得到了相同 div 的三种不同行为。

我希望 div 像常规输入字段一样工作，但我不想使用实际的输入元素。

我在 Stackblitz demo 中做了一个问题的工作示例。

组件代码如下。

元素组件的模板HTML:

<div contentEditable='true' (input)="update($event)">{{value}}</div>
<p>{{value}}</p>

组件元素的打字稿文件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'element',
  template: `<div contentEditable='true' (input)="update($event)">{{value}}</div>
    <p>{{value}}</p>
`,
  styleUrls: ['./element.component.css']
})
export class ElementComponent {
  @Input() value: string;

  update(event) {
    this.value = event.target.innerText;
  }
}

CSS:

div{
  background: black;
  margin: auto;
  color:white;
  font-size: 2em;
}

三种不同的行为是：

如果您没有为值输入字段设置初始值，因为您输入 div，文本会连续附加到自身。
如果您在输入时向值输入字段提供初始值在 div 中，光标将其重置到初始位置。
无论您是提供初始文本还是在空白处键入内容 div，如果您 select 来自 div 的所有文本并点击删除或退格键并开始输入。它表现为一个普通的文本框。

我期待第三种行为，例如在您按照其行为方式清除元素之后。

Answer 1

可能的解释：你没有声明绑定值。

解决方法：添加：

[textContent]="model" 声明模板时 div

  model;
  ngOnInit(){
    this.model = this.value;
  }

内部 ElementComponent 导出 class

Stackblitz Demo

相关： , https://github.com/KostyaTretyak/ng-stack/tree/master/projects/contenteditable

尝试使用 angular 中的可编辑 div 中的文本内容更新变量时，可编辑 div 出现奇怪的行为。有什么解释吗？

Strange behavior on editable div when trying to update a variable with text content in an editable div in angular. Any explanations?

html

css

contenteditable

angular