如何在 ElementRef (nativeEelement) 中设置 HTML 内容？

Question

我想用指令设置 HTML 元素的内容。

export class AdvertisementDirective {

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

}

但它不起作用，也没有给出任何错误。

这样做背后的想法是在指令中包含 Ad 代码，并在我使用指令属性的任何地方设置它。广告代码包含JavaScriptHTML 代码。

Answer 1

通过直接更改 DOM 上的属性进行的 DOM 操作nativeElement不被认为是一种好的做法。它在某些情况下也不起作用，例如使用 Angular Universal 的 Web Workers 和服务器端渲染。

一种更安全的方法是使用Renderer2.

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

  @ViewChild('templateRefName') el: ElementRef;

  constructor(
    private renderer: Renderer2
  ) {
  }

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

}

在模板中：

<div #templateRefName></div>