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

包含contenteditable div的模板文件，并单击文本应为粗体的按钮：

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

---

您可以在此处使用多种方法：

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>``

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

---

单击按钮时，您希望实现什么效果或操作？它是一个contenteditable div。我忘了在这里的代码中提及它。我希望实现的效果是，就像在文本编辑器中，我们单击粗体按钮，文本变为粗体，这与我希望实现的效果相同。它是一个contenteditable div。我忘了在代码中提及它这里。我想实现的效果是，就像在文本编辑器中一样，我们点击一个粗体按钮，文本就会变为粗体，这正是我想要做的。先生，还有一件事，如果我们必须绑定一个属性，并在不同的点击中同时应用这两个属性，那么应该怎么做？您是否正在寻找类似的东西：是的，先生，类似的东西但是，如果我使用下面给出的代码，想要按钮产生的相同效果，会怎么样呢。如何使用ngOnChanges或其他方法实现这一点

Bold Italic

Add change event for the select标记，因此每次用户更改选择时，事件都会触发并调用change方法，我将提供一个stackBlitz示例

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

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