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

Question

我想设置 nativeElement 的 innerText/innerHTML/textContent，该怎么做？

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

其中timeVal是一个字符串

该元素被正确选定，但是setValue似乎根本不起作用。

- Donovant

---

你如何创建 nativeCloneLi？ - ForestG

使用 ElementRef instance.nativeElement - Donovant

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>');
  }
}

实时演示

- Tomasz Kula

---

如果我们只想在本机元素上读取一个值，例如const top = this._elementRef.nativeElement.getBoundingClientRect().top;，那么我们是否也应该使用渲染器？ - abyrne85

@abyrne85 我也很好奇，如果我们只想读取元素，是否应该使用渲染器。 - calbear47

@abyrne85，@calbear47 不需要。Renderer2提供了一种API来以平台无关的方式操作本机元素。这意味着它释放了您对直接DOM访问的需求，并允许您以抽象方式对其进行操作。但只要你仅读取而不改变任何内容，就可以直接使用本机元素（如果支持访问），或者提供具有缺少功能的自定义Renderer2实现。实际上，除了ElementRef和events之外，Angular不提供从DOM获取任何东西的支持。 - Bardr

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);
  }
}

- Manish