Question

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

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

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

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

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

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

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

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

我不确定为什么会这样，看来我以编程方式修改了innerHTML之后，从AppComponent中更改'content'属性不会对该段显示的html产生任何影响。

在我正在处理的实际应用程序中，结构更加复杂，我不必修改段落的innerHTML，但是可以修改属于表（Kendo Grid）的不同td的innerHTML。这我认为我无法使用管道。

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

预先感谢

Answer 1

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

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

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

到

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

请参阅此stackblitz以供参考。
编辑：感谢@DanielBeck找出此结果仅在Chrome浏览器中有效。

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