¿Cómo puedo agregar una clase a la etiqueta del cuerpo sin hacer que el cuerpo sea el selector de aplicaciones 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
Me encantaría comentar. Pero debido a la falta de reputación, escribo una respuesta. Bueno, conozco dos posibilidades para resolver este problema.
constructor(@Inject(DOCUMENT) private document: Document) {} ngOnInit(){ this.document.body.classList.add('test'); }Bueno y tal vez incluso mejor. Puede inyectar el renderizador o renderer 2 (en NG4) y agregar la clase con el renderizador.
export class myModalComponent implements OnDestroy { constructor(private renderer: Renderer) { this.renderer.setElementClass(document.body, 'modal-open', true); } ngOnDestroy(): void { 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(): void { this.renderer.removeClass(document.body, 'modal-open'); } }Creo que la mejor manera de hacerlo es una combinación de los dos enfoques de DaniS anteriores: usar el renderizador para configurar/eliminar la clase, pero también usar el inyector de documentos, por lo que no depende en gran medida de window.document pero eso puede ser reemplazado dinámicamente (por ejemplo, al renderizar del lado del servidor). Así que 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'); } }