reactivos - Angular2 agrega clase a etiqueta de cuerpo

ng-content select angular 4

Question

¿Cómo puedo agregar una clase a la etiqueta del cuerpo sin hacer que el cuerpo sea ​​el selector de la aplicación y usar el enlace de host?

Intenté usar el Renderer pero cambia todo el cuerpo

Clase de enlace angular 2.x en la etiqueta del cuerpo

Estoy trabajando en una gran aplicación angular2 y cambiar el selector raíz afectará mucho código, tendré que cambiar mucho código

Mi caso de uso es este:

Cuando abro un componente modal (creado dinámicamente) quiero que la barra de desplazamiento del documento se oculte

Answer 1

Creo que la mejor manera de hacerlo es una combinación de ambos enfoques de DaniS arriba: usar el renderizador para configurar / eliminar la clase, pero también usar el inyector de documentos, por lo que no depende en gran medida del window.document pero eso puede ser reemplazado dinámicamente (por ejemplo, cuando se procesa en el lado del servidor). Entonces todo el código se vería así:

import { DOCUMENT } from ''@angular/common'';
import { Component, Inject, OnDestroy, OnInit, Renderer2 } from ''@angular/core'';

@Component({ /* ... */ })
export class MyModalComponent implements OnInit, OnDestroy {
    constructor (
        @Inject(DOCUMENT) private document: Document,
        private renderer: Renderer2,
    ) { }

    ngOnInit(): void {
        this.renderer.addClass(this.document.body, ''embedded-body'');
    }

    ngOnDestroy(): void {
        this.renderer.removeClass(this.document.body, ''embedded-body'');
    }
}

Answer 2

Me encantaría comentar Pero debido a la falta de reputación, escribo una respuesta. Bueno, sé dos posibilidades para resolver este problema.

1. Inyectar el documento global. Bueno, podría no ser la mejor práctica, ya que no sé si nativescript, etc. es compatible con eso. Pero al menos es mejor que usar JS puro.

constructor(@Inject(DOCUMENT) private document: Document) {} ngOnInit(){ this.document.body.classList.add(''test''); }

Bueno y tal vez incluso mejor. Puede inyectar el procesador o el procesador 2 (en NG4) y agregar la clase con el procesador.

export class myModalComponent implements OnDestroy { constructor(private renderer: Renderer) { this.renderer.setElementClass(document.body, ''modal-open'', true); } ngOnDestroy() { this.renderer.setElementClass(document.body, ''modal-open'', false); }

EDITAR PARA ANGULAR4:

import { Component, OnDestroy, Renderer2 } from ''@angular/core''; export class myModalComponent implements OnDestroy { constructor(private renderer: Renderer2) { this.renderer.addClass(document.body, ''modal-open''); } ngOnDestroy() { this.renderer.removeClass(document.body, ''modal-open''); }