Question

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

export class AdvertisementDirective {

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

}

但是它不起作用，并且不给出任何错误。

执行此操作的想法是在指令中添加广告代码，并在我使用指令属性的任何位置进行设置。广告代码包含JavaScript和HTML代码。

Answer 1

通过直接更改nativeElement上的属性进行

DOM操作不被认为是一种好习惯。在某些情况下，例如Web Workers和使用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元素。

Answer 3

也可以使用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);

  }

}

如何在ElementRef（nativeEelement）中设置HTML内容？

3 个答案: