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

Posted 2023-02-22

【中文标题】如何使用 Renderer2 在 Angular 中设置本机元素的值？

【英文标题】：How can I set the value of a native element in Angular, using Renderer2?

【发布时间】：2018-09-14 05:43:21

【问题描述】：

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

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

其中 timeVal 是一个字符串

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

【问题讨论】：

如何创建nativeCloneLi？

使用 ElementRef instance.nativeElement

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

【讨论】：

如果我们只想读取原生元素上的值，我们是否也应该使用渲染器，例如 const top = this._elementRef.nativeElement.getBoundingClientRect().top;

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

@abyrne85, @calbear47 不，没有必要。 Renderer2 提供了一个 API 以与平台无关的方式操作原生元素。这意味着它将您从直接的 DOM 访问中解放出来，并允许您以抽象的方式对其进行操作。但只要您只阅读而不更改任何内容，您就可以直接使用本机元素（如果支持访问它们）或提供自定义 Renderer2 实现以及您缺少的功能。实际上 Angular 不提供任何支持（ElementRef 和 events 除外）从 DOM 获取任何东西。

【参考方案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);