Header Ads Widget

Ticker

6/recent/ticker-posts

Angular 10 Renderer2 en servicios con RendererFactory2: Agregar ejemplo dinámico de Div

 En este ejemplo rápido, cómo crear dinámicamente un div, con un idy agregarlo al elemento del cuerpo en un servicio Angular 10. Veremos cómo usar RendererFactory2en servicios para crear una instancia de Renderer2.

En servicios, puede utilizar RendererFactory2para crear una Renderer2instancia. Por ejemplo:

import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DOMService {
  private renderer: Renderer2;
  constructor (rendererFactory: RendererFactory2) {
    // Get an instance of Renderer2
    this.renderer = this.rendererFactory.createRenderer(null, null);
  }

  createDIV() {
    // Use Renderer2 to create the div element
    const div = this.renderer.createElement('div');
    // Set the id of the div
    this.renderer.setProperty(div, 'id', 'container');
    // Append the div to the body element
    this.renderer.appendChild(document.body, div);

    return div;
  }
}

Crea e inicializa un renderizador personalizado que implementa la clase base Renderer2. RendererFactory2

Si intenta inyectar Renderer2directamente en un servicio, obtendrá el siguiente error porque solo se puede inyectar en componentes o directivas:

Unhandled Promise rejection: StaticInjectorError[Renderer2]: 
  StaticInjectorError[Renderer2]: 
    NullInjectorError: No provider for Renderer2! ; Zone: <root> ; Task: Promise.then ; Value: Error: StaticInjectorError[Renderer2]: 
  StaticInjectorError[Renderer2]: 
    NullInjectorError: No provider for Renderer2!

Publicar un comentario

0 Comentarios