Как установить HTML-контент в ElementRef (nativeEelement)?

Question

Я хочу установить содержимое элемента HTML с помощью директивы.

export class AdvertisementDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.background = 'yellow';
    el.nativeElement.content = '<p>Hello World<p>';
  }

}

Но это не работает и не выдает никакой ошибки.

Идея, лежащая в основе этого, заключается в том, чтобы в директиве содержался рекламный код, и он устанавливался там, где я использовал атрибут директивы.Код для рекламы содержит JavaScript и HTML-код.

Answer 1

DOM Манипуляции с помощью непосредственного изменения свойств на nativeElement не считаются хорошей практикой.Это также не будет работать в некоторых случаях, таких как Web Workers и Server Rendering с использованием Angular Universal.

Более безопасный способ сделать это - использовать Renderer2.

import { ..., ElementRef, ViewChild, Renderer2, ... } from '@angular/core';
...
export class AdvertisementDirective {

  @ViewChild('templateRefName') el: ElementRef;

  constructor(
    private renderer: Renderer2
  ) {
  }

  ngOnInit() {
    this.renderer.setStyle(this.el.nativeElement, 'background', 'yellow');
    this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '<p>Hello World<p>');
  }

}

И в шаблоне:

<div #templateRefName></div>

Answer 2

Просто исправил это следующим образом:

el.nativeElement.innerHTML = '<p>Hello World<p>';

Я понял, что nativeElement должен принимать все методы JavaScript, поскольку это собственный HTML-элемент.