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

Posted 2023-02-22

【中文标题】如何在 ElementRef (nativeEelement) 中设置 HTML 内容？

【英文标题】：How to set HTML content in the ElementRef (nativeEelement)?

【发布时间】：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代码。

【参考方案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 元素。