javascript - Angular - modify innerHTML - Stack Overflow

admin管理员组

文章数量:1324979

I need to change the innerHTML of an element and I've decided to create an attribute directive to acplish this task. I have created the following example to illustrate what I'm basically trying to do:

StackBlitz

I have used interpolation to set the content of a paragraph:

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

The 'changeContentDirective' modifies the innerHTML of the paragraph if the use hovers over it.

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

I had also set a function to execute after 5s that will change the value of the 'content' property:

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

If I don't hover over the paragraph, the content is being changed after 5s. The strange part is that the content is not modified by the handler from setTimeout if I hover over the element (obviously before the handler gets executed)

I'm not sure why this is happening, it seems that after I modify the innerHTML programmatically, changing the 'content' property from the AppComponent doesn't have any effect on the html displayed by the paragraph.

In the actual application I'm working on, the structure is more plex, I don't have to modify the innerHTML of a paragraph, but the innerHTML of different td's that belong to a table (Kendo Grid), because of this I don't think I can use a pipe.

My question is whether I can modify the innerHTML of an element in a directive by accessing the native element and also why this strange issue occurs?

Thanks in advance

I need to change the innerHTML of an element and I've decided to create an attribute directive to acplish this task. I have created the following example to illustrate what I'm basically trying to do:

StackBlitz

I have used interpolation to set the content of a paragraph:

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

The 'changeContentDirective' modifies the innerHTML of the paragraph if the use hovers over it.

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

I had also set a function to execute after 5s that will change the value of the 'content' property:

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

If I don't hover over the paragraph, the content is being changed after 5s. The strange part is that the content is not modified by the handler from setTimeout if I hover over the element (obviously before the handler gets executed)

I'm not sure why this is happening, it seems that after I modify the innerHTML programmatically, changing the 'content' property from the AppComponent doesn't have any effect on the html displayed by the paragraph.

In the actual application I'm working on, the structure is more plex, I don't have to modify the innerHTML of a paragraph, but the innerHTML of different td's that belong to a table (Kendo Grid), because of this I don't think I can use a pipe.

My question is whether I can modify the innerHTML of an element in a directive by accessing the native element and also why this strange issue occurs?

Thanks in advance

• javascript
• angular

Share Follow asked Jan 22, 2019 at 20:22 usrrduusrrdu 4311 gold badge11 silver badge55 bronze badges 1

• 1 Don't modify the DOM directly. Change the value of the content variable and let Angular do the work of changing the DOM. Bypassing the framework and making changes it doesn't know about rarely works out well -- when you overwrite parts of the DOM you're also overwriting bindings that Angular is depending on. – Daniel Beck Commented Jan 22, 2019 at 20:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The issue occurs because the innerHTML of this element contains the Angular interpolation.
When you overwrite this innerHTML, the interpolated value of content gets lost.

You can change what gets displayed in the paragraph by changing

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

to

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

See this stackblitz for reference.
EDIT: Thanks to @DanielBeck for finding out that this result only works in the Chrome browser.

This technique is bad practice though, as there are better ways to change the innerHTML of an element (e.g. described here).

本文标签： javascriptAngularmodify innerHTMLStack Overflow