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

【问题标题】：How to set HTML content in the ElementRef (nativeEelement)?如何在 ElementRef (nativeEelement) 中设置 HTML 内容？
【发布时间】：2019-03-20 03:39:51
【问题描述】：

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

export class AdvertisementDirective {

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

}

但它不起作用并且没有给出任何错误。

这样做的想法是在指令中包含广告代码，并将其设置在我使用指令属性的任何位置。广告代码包含JavaScript和HTML代码。

【问题讨论】：

标签： angular angular-directive

【解决方案1】：

通过直接更改 nativeElement 上的属性来进行 DOM 操作不被认为是一种好的做法。它在某些情况下也不起作用，例如使用 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>

【讨论】：

感谢您的回答。你认为设置script 也有效吗？
我没试过。但我认为不会。为了避免 XSS，Angular 会阻止/剥离内容以使其安全。虽然不完全确定。请尝试StackBlitz
您不应该在 ngAfterViewInit 中进行 nativeElement 操作吗？我曾经读到在 ngOnInit 中执行此操作可能会导致元素未定义。不确定这是否仅适用于组件。
感谢您的评论。我已经更新了答案。 :)

【解决方案2】：

附加文本也可以通过使用 renderer2 对象的 createText 属性来实现。

    import {ElementRef, ViewChild, Renderer2} from '@angular/core';


export class AdvertisementDirective {

  @ViewChild('templateRefName') el: ElementRef;

  constructor(
    private renderer: Renderer2
  ) {
  }

  ngOnInit() {

   const text = this.renderer.createText('Hello World'); // <-- TO Be Noted
    this.renderer.appendChild(this.el.nativeElement, text);

  }

}

【讨论】：

【解决方案3】：

刚刚用以下方法修复它：

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

我意识到 nativeElement 应该接受所有 JavaScript 方法，因为它是原生 HTML 元素。

【讨论】：