Angular2 ajoute une classe à la balise body

Question

Comment ajouter un classe à la corps sans rendre la balise corps comme sélecteur d'application et en utilisant la liaison hôte ?

J'ai essayé d'utiliser le moteur de rendu, mais il modifie l'ensemble du corps.

Angular 2.x bind class on body tag

Je travaille sur une grosse application angular2 et changer le sélecteur Root va impacter beaucoup de code, je vais devoir changer beaucoup de code

Mon cas d'utilisation est le suivant :

Lorsque j'ouvre un composant modal (créé dynamiquement), je souhaite que la barre de défilement du document soit masquée.

Answer 1

J'aimerais faire un commentaire. Mais en raison du manque de réputation j'écris une réponse. Eh bien, je sais que deux possibilités pour résoudre ce problème.

1. Injecter le Document Global. Eh bien, il pourrait ne pas être la meilleure pratique que je ne sais pas si nativescript etc prend en charge. Mais au moins, c'est mieux que de l'utiliser pur JS.

constructeur(@Inject(DOCUMENT) document: Document) {}

ngOnInit(){
c'.document.corps.classList.add('test');
}

Et peut-être même mieux. Vous pourrait injecter le convertisseur ou convertisseur 2 (sur CG4) et ajouter la classe avec le moteur de rendu.

l'exportation de la classe myModalComponent implémente OnDestroy {

 constructeur(privé convertisseur: Convertisseur) {
 c'.moteur de rendu.setElementClass(document.corps "modal-open', true);
}

 ngOnDestroy() {
 c'.moteur de rendu.setElementClass(document.corps "modal-open', false);
}

EDIT POUR ANGULAR4:

importer { Composant, OnDestroy, Renderer2 } '@angulaire de base";

l'exportation de la classe myModalComponent implémente OnDestroy {

 constructeur(privé moteur de rendu: Renderer2) {
 c'.moteur de rendu.addClass(document.corps "modal-ouvert");
}

 ngOnDestroy() {
 c'.moteur de rendu.removeClass(document.corps "modal-ouvert");
}

Answer 2

Je pense que la meilleure façon de procéder est de combiner les deux approches proposées par DaniS ci-dessus : Utiliser le moteur de rendu pour définir/supprimer la classe, mais aussi utiliser l'injecteur de document, de sorte qu'il ne soit pas fortement dépendant de l'injecteur de document. window.document mais qui peut être remplacée dynamiquement (par exemple, lors du rendu côté serveur). L'ensemble du code ressemblerait donc à ceci :

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