小编usr*_*rdu的帖子

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

闪电战

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

<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，而是修改属于一个表（Kendo Grid）的不同td的innerHTML，因此我不我想我不能用管子。

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

提前致谢