Угловой - изменить innerHTML

Question

Мне нужно изменить innerHTML элемента, и я решил создать директиву атрибута для выполнения этой задачи.Я создал следующий пример, чтобы проиллюстрировать, что я в основном пытаюсь сделать:

StackBlitz

Я использовал интерполяцию для установки содержимого абзаца:

<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 программно, изменение свойства «content» из AppComponent не окажет никакого влияния на HTML, отображаемый в абзаце.

В реальном приложении, над которым я работаю, структура более сложная,Мне не нужно изменять innerHTML абзаца, но innerHTML различных td, принадлежащих таблице (Kendo Grid), из-за этого я не думаю, что могу использовать канал.

MyВопрос заключается в том, могу ли я изменить innerHTML элемента в директиве путем доступа к нативному элементу, а также почему возникает эта странная проблема?

Заранее спасибо

Answer 1

Проблема возникает из-за того, что innerHTML этого элемента содержит угловую интерполяцию.
Когда вы перезаписываете это innerHTML, интерполированное значение content теряется.

Вы можете изменить то, чтоотображается в абзаце путем изменения

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

на

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

См. этот stackblitz для справки.
РЕДАКТИРОВАТЬ: Благодаря @ DanielBeck для определения того, что этот результат работает только в браузере Chrome.

Этот метод является плохой практикой, поскольку есть лучшие способы изменить innerHTML элемента (например, описан здесь ).