时间戳

首页 > 解决方案 > Angular - 修改innerHTML

javascript - Angular - 修改innerHTML

问题描述

我需要更改一个元素的 innerHTML，我决定创建一个属性指令来完成这项任务。我创建了以下示例来说明我基本上想要做的事情：

StackBlitz

我使用插值来设置段落的内容：

<p changeContentDirective>{{content}}</p>

如果用户将鼠标悬停在段落上，“changeContentDirective”会修改段落的 innerHTML。

this.el.nativeElement.innerHTML = 'modified by directive';

我还设置了一个函数在 5 秒后执行，这将改变“内容”属性的值：

ngOnInit() {
    setTimeout(() => {
      console.log('timeout: modify content');
      this.content = 'modifed after timeout'
    }, 5000);
  }

如果我不将鼠标悬停在段落上，则内容将在 5 秒后更改。奇怪的是，如果我将鼠标悬停在元素上（显然在处理程序被执行之前），setTimeout 中的处理程序不会修改内容

我不确定为什么会发生这种情况，似乎在我以编程方式修改 innerHTML 之后，从 AppComponent 更改“内容”属性对段落显示的 html 没有任何影响。

在我正在做的实际应用中，结构比较复杂，我不必修改一个段落的innerHTML，而是不同td的属于一个表（剑道网格）的innerHTML，因为这个我不'认为我不能使用管道。

我的问题是我是否可以通过访问本机元素来修改指令中元素的 innerHTML 以及为什么会出现这个奇怪的问题？

提前致谢

标签： javascriptangular

解决方案

出现此问题是因为innerHTML此元素的 包含角度插值。
当您覆盖 thisinnerHTML时，内插值content会丢失。

您可以通过更改来更改段落中显示的内容

this.el.nativeElement.innerHTML = 'modified by directive';

至

this.el.nativeElement.innerText = 'modified by directive';

请参阅此stackblitz以供参考。
编辑：感谢@DanielBeck发现此结果仅适用于 Chrome 浏览器。

但是这种技术是不好的做法，因为有更好的方法来更改innerHTML元素的 （例如，此处描述）。

推荐阅读