我应该如何对contenteditable div进行双向绑定，以便在onclick事件发生时访问内容并进行更改

Question

模板文件，包含内容可编辑的div和按钮点击，文本应为粗体：

<button class="btn btn-light" (click)="onBoldClick()">
<b>B</b>
</button>
<div [(ngModel)]="content" name="fieldName" ngDefaultControl class="container editor">{{content}}
</div>

TypeScript文件：

export class EditorComponent implements OnInit {

content:string="";

constructor() { }

ngOnInit(): void {}

onBoldClick(){
console.log(this.content.bold());
}
}

Answer 1

这里可以使用多种方法：

1-您可以使用ngClass:为特定div元素添加点击样式

<button class="btn btn-light" (click)="onBoldClick()"><b>B</b></button>
<div [(ngModel)]="content" [ngClass]="[divStyle]"  name="fieldName" ngDefaultControl class="container editor" >{{content}} 
</div>``

//ts文件

divStyle: string;
onBoldClick(){
this.divStyle = 'font-weight:bold;';
}

参考

2-此外，您还可以使用viewChild编辑HTML元素的样式：参考
更新StackBlitz