时间戳

首页 > 解决方案 > 如何使用 ngModel 在 div 的 innerhtml 属性上实现 2 路数据绑定

angular - 如何使用 ngModel 在 div 的 innerhtml 属性上实现 2 路数据绑定

问题描述

我是 Angular 的新手，我有一个 textarea，在该 textarea 中键入的任何 HTML 都将在 div 中预览，并且该 div 是可编辑的。因此，如果我修改 div 中的任何内容，应该在 textarea 内的 HTML 中反映相同的内容。假设<h1> hello world </h1>在 textarea 中有一个，它将像hello world在 div 中一样被预览，我删除了world然后 textarea 中的 HTML 应该变成<h1>hello</h1>. 我尝试了这个解决方案并尝试将 ngModel 添加到 div 中，但两者都不起作用。这是 stackblitz 链接。谢谢你。

export class AppComponent  {
  content = 
`<h2>Hello</h2>
<p>This is a great example...</p>
`;
}
<textarea 
  [(ngModel)]="content"
  cols="50" 
  rows="10">
  </textarea>

<br><br><br>

<div [innerHtml]="content" contenteditable="true">
</div>

标签： angular

解决方案

像这样试试

组件.html

<textarea 
  [(ngModel)]="content"
  cols="50" 
  rows="10"></textarea>

<br><br><br>

<div [innerHtml]="content" contenteditable="true" (input)="updateModel($event)" #model>
</div>

组件.ts

content = `<h2>Hello</h2>
             <p>This is a great example...</p>
            `;
  updateModel(event) {
     console.log(event.target.innerHTML)
     setTimeout(()=> {
     this.content = event.target.innerHTML;
     }, 1000)
   }

推荐阅读