Javascript 角度-修改innerHTML

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

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

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

我还设置了一个5s后执行的函数，该函数将更改“content”属性的值：

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

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

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

在我正在处理的实际应用程序中，结构更加复杂，我不需要修改段落的innerHTML，但是不同td的innerHTML属于一个表（剑道网格），因此我认为我不能使用管道

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

---

提前感谢

出现此问题是因为此元素的

innerHTML

包含角度插值。
覆盖此

innerHTML

时，

content

的插值将丢失

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

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

到

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

---

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

innerHTML

。

不要直接修改DOM。更改

content

变量的值，让Angular完成更改DOM的工作。绕过框架并进行它不知道的更改很少奏效——当您覆盖部分DOM时，您也会覆盖Angular所依赖的绑定。更改为innerText对我来说确实有效：）@DanielBeck我添加了一个使用

innerText

@DanielBeck的工作示例，抱歉，我不明白你的意思。为什么你说它不工作？哇，好吧，我站在部分更正-我刚刚检查了其他浏览器，它在Chrome中工作（仅）。Firefox和Safari都失败了（即使在超时触发后，它们仍然被“修改指令”卡住了）。我真的对这个结果感到惊讶，并为我之前的激烈表示歉意。（但我认为我们都同意这是一种不好的做法，即使它在一个浏览器中工作？@DanielBeck我完全同意这是一种不好的做法，并且对它只在Chrome中工作感到惊讶。

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

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