如何使用 Renderer2 在 Angular 中设置本机元素的值？

Question

我想设置 nativeElement 的 innerText/innerHTML/textContent？

this.render.setValue(this.nativeCloneLi.querySelector('.down .inn'), timeVal);

其中 timeVal 是一个字符串

元素选择正确，但 setValue 似乎根本不起作用

Answer 1

您需要使用 renderer.setProperty() 而不是 renderer.setValue()。

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

@Component({
  selector: 'my-app',
  template: `
  <div #el></div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('el') el: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '<h1>Hello world</h1>');
  }
}

Live demo

Answer 2

我更喜欢这样做：

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

@Component({
  selector: 'my-app',
  template: `
  <div #el></div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('el') el: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    const h1 = this.renderer.createElement('h1');
    const text = this.renderer.createText('Hello world');

    this.renderer.appendChild(h1, text);
    this.renderer.appendChild(this.el.nativeElement, div);
  }
}

如何使用 Renderer2 在 Angular 中设置本机元素的值？

How can I set the value of a native element in Angular, using Renderer2?

javascript

dom

renderer

angular