Javascript 角度：通过双击或键入任意键可编辑内容的div

问题

我想制作一个具有可编辑区域的组件。通过两种方式启用编辑：

用户首先单击该区域并键入内容

用户双击该区域

这两项功能都无法按预期工作

在第一种情况下，单击后该区域将变为可编辑，但如果按某个键，内容将变为空，但没有键/字符。守则：

@HostListener('window:keydown', ['$event'])
onWindowKeydown($event) {
  // ... other code
  // empty the content
  this.contentWrapper.nativeElement.innerHTML = ''; // works
  // set the focus
  this.contentWrapper.nativeElement.focus(); // works
  // re-dispatch the keydown event for inser the character pressed
  this.contentWrapper.nativeElement.dispatchEvent($event); // doesn't works!
}

onDblClick($event) {
  // ... othe code
  this.allowEdit = true;
}

在第二种情况下，双击后组件将变为可编辑，但如果按某个键，内容将不会更新。守则：

@HostListener('window:keydown', ['$event'])
onWindowKeydown($event) {
  // ... other code
  // empty the content
  this.contentWrapper.nativeElement.innerHTML = ''; // works
  // set the focus
  this.contentWrapper.nativeElement.focus(); // works
  // re-dispatch the keydown event for inser the character pressed
  this.contentWrapper.nativeElement.dispatchEvent($event); // doesn't works!
}

onDblClick($event) {
  // ... othe code
  this.allowEdit = true;
}

如何修复它

工作演示

看

完整代码

app.component.ts

app.component.html

app.module.ts

---

我知道你在说什么，但是双击之后，如果我再次点击文本，我可以很好地编辑。它需要额外的点击来将光标放在文本中开始键入。我不认为这是一个错误的功能，因为双击将其设置为可编辑，因此从那时起，您可以在框中单击并编辑文本。我希望光标可以在双击后进行键入，如“office excel单元格”，如果您删除单次单击并将双击方法更改为单次单击触发，然后双击将在第一次单击时将对象设置为可编辑，第二次单击时将光标放入框中。

.warapper .editable { 
    border: 'none'; 
    outline: none;
    display: block;
    min-height: 15px;
    background: lightgrey;
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }