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

Question

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

在某些情况下，我必须为div的内容设置一些初始值，并在某些情况下捕获div中的类型数据。

但是我根据设置的初始值为同一个div获得了三种不同的行为。

我希望div的行为类似于常规输入字段，但我不想使用实际的Input元素。

我在Stackblitz demo中提出了一个问题的实例。

组件代码如下。

元素组件的模板HTML：

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

组件元素的typescript文件：

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;
}

三种不同的行为是：

1. 如果未在值输入字段中设置初始值，则在键入div时，文本将连续附加到自身。
2. 如果为值输入字段提供初始值，则在键入div时，光标会将其重置为初始位置。
3. 无论您是提供初始文本还是在空div中键入内容，如果您从div中选择所有文本并点击删除或退格并开始输入。它表现为普通文本框。

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

Answer 1

可能的解释：您尚未声明绑定值。

解决方法：添加：

[textContent]="model"在宣布模板div时

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

在ElementComponent出口类

Stackblitz Demo

相关：How to use [(ngModel)] on div's contenteditable in angular2?，https://github.com/KostyaTretyak/ng-stack/tree/master/projects/contenteditable